<template>
  <div @click="showMarketingBuyBtn=false" :class="{'theme-market': showMarketingBar}">
    <div class="c-maxh427 c-w100 c-text-hidden c-p">
      <img class="c-w100 imgCloseBig" :src="$addXossFilter(dataInfo.cover, require('../../../assets/defult270.png'))" alt="" />
      <div class="c-pa c-p-l24 c-p-t24 c-pz99" v-if="enableBuyedInfoSwiper==1&&dataInfo.payType==2&&swiperList.length>2">
        <buy-inforswiper :swiperList='swiperList'></buy-inforswiper>
      </div>
    </div>
    <!-- 营销活动倒计时 -->
    <flash-sales-time-new
      v-if="showMarketingBar"
      :type="dataInfo.sales? 'isSale':dataInfo.isFriendHelper ? 'isFa' : dataInfo.bargain ? 'isBargain' : 'isCollage'"
      :price="dataInfo.sales ? dataInfo.sales.price : dataInfo.collage ? dataInfo.collage.captainPrice : dataInfo.bargain ? dataInfo.bargain.reservePrice : ''"
      :from="dataInfo.collage && dataInfo.collage.collageGroupType && dataInfo.collage.collageGroupType == 2 ? 'activity' : ''"
      :startTime="dataInfo.sales ? dataInfo.sales.sales.startTime : dataInfo.bargain ? dataInfo.bargain.startTime : dataInfo.collage ? dataInfo.collage.startTime : dataInfo.faStartAt"
      :endTime="dataInfo.sales ? dataInfo.sales.sales.endTime : dataInfo.bargain ? dataInfo.bargain.endTime : dataInfo.collage ? dataInfo.collage.endTime : dataInfo.faEndAt"
      :originalPrice="dataInfo.price"
      :stockBargain="dataInfo.bargain && dataInfo.bargain.stock"
      :stock="dataInfo.sales ? dataInfo.sales.balance: ''"
      :isLimit="dataInfo.sales && dataInfo.sales.limit == 0 || (dataInfo.bargain && dataInfo.bargain.isLimitStock == 2) ? false : true"
      :salesTag="dataInfo.sales && dataInfo.sales.sales.tags"
      :peopleNum="dataInfo.collage && dataInfo.collage.peopleNum"
      :isPreheat="dataInfo.bargain && dataInfo.bargain.isPreheat"
      :bargainStatus="dataInfo.bargain && dataInfo.bargain.status"
      :optimal="optimal"
      @showCoupon="showCoupon = true"
      @falshSalesTime="falshSalesTime"
      @finishFlashSales="finishFlashSales"
    >
    </flash-sales-time-new>
    <div class="minh76" id="tabhBarWrap">
      <section id="tabhBar" :class="[tabhBarFixed == true ? 'tabhBar' : '', isApp || $isWxApp() || unenableTopNav ? 'c-p-t0' : 'c-p-t68', ]">
        <my-small-tabbar class="c-p c-ph24 c-bd-b1-f6" :styleType="2" :tabList="tabList" :tabIndex="typeBar" @changeTab="changeType"></my-small-tabbar>
      </section>
    </div>
    <section v-show="hasGetRelation" class="c-bg-white" id="contentWrap">

      <div class="c-pb20" :class="typeBar == 0 ? (moveDirection == 1 ? 'moveLeft' : moveDirection == 2 ? 'moveRight' : '') : ''" v-show="typeBar == 0">
        <div class="c-bd-b12-f5">
          <div class="c-flex-row c-aligni-center c-pr24">
            <div class="c-w0 c-flex-grow1">
              <price-bar class="c-pt28 c-pl24" v-if="!isMarketing && !dataInfo.hasPermission && !dataInfo.sales && !dataInfo.collage"
                :dataInfo="dataInfo"
                :chainInfo="chainInfo"
              >
              </price-bar>
              <div :class="!isMarketing && !dataInfo.hasPermission ? 'c-pt12' : 'c-pt28'" class="c-ph24">
                <span class="c-fs30 c-fc-xblack c-fw-b">{{dataInfo.name}}</span>
              </div>
              <div class="c-ph24" v-if="dataInfo">
                <div class="c-pt16 c-pb20 c-fs20 c-fc-gray c-flex-row">
                  <span class="c-mr20">共{{dataInfo.total}}内容</span>
                  <span v-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(cfrom.package))" class="c-mr20">{{(dataInfo.payType== 2 ? dataInfo.salesCount : dataInfo.visits) | formatNumber}}人{{dataInfo.payType== 2 && !$isWxAppIos() ? '购买' : '观看'}}</span>
                  <valid-time-com :dataInfo="dataInfo" :prodId="combosId" :prodType="cfrom.package"></valid-time-com>
                </div>
              </div>
            </div>
            <div class="c-flex-row c-aligni-center">
              <div v-if="cfg.enableSales == 1 && !isiOS && dataInfo.payType == 2 && dataInfo.isUserGroup != 1 && !$isWxApp()" class="c-flex-column c-aligni-center c-ww52 c-mr8 coms-live-iframe-none" @click="popPresentCourse">
                <div class="iconfont c-fs36 c-fc-xblack">&#xe7b9;</div>
                <div class="c-fs16 c-fc-xblack c-mt4">赠送</div>
              </div>
              <collect-btn-com :needBindPhone="bindPhoneSetting && bindPhoneSetting.collectBind" :hasCollect="isCollect" :prodType="cfrom.package" :prodId="combosId" @doCollect="doCollect" @cancelCollect="cancelCollect"></collect-btn-com>
            </div>
          </div>
          <!-- 引导入群 -->
          <invite-group class="c-pr24 c-pb24"
            v-if="showInviteGroup"
            :guideText="dataInfo.guideData.guideDesc"
            @handleShowGuidePop="handleShowGuidePop"
          >
          </invite-group>
          <div v-if="dataInfo.hasPermission && relatedList && relatedList.length > 0" class="c-bd-t12-f5 c-pv24 c-pl24">
            <div class="c-fs24 c-fc-xblack c-fw600">搭配学习</div>
            <div class="c-mt20 c-contextX-scroll c-fs0 c-flex-row">
              <div v-for="(item, index) in relatedList" :key="index" @click="goRevlantDetail(item.mainProdType, item.id)" class="c-ww210 c-inlineblack c-mr20 c-vcAlign-top">
                <div class="c-ww210 c-hh140 c-p c-br6">
                  <img class="c-ww210 c-hh140 c-br4" :src="$addXossFilter(item.cover)" alt="">
                  <div v-if="item.mainProdType != 61 || (item.mainProdType == 61 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(41))))" class="c-fs16 c-ph10 c-translucent-balck50 c-hh26 c-lh28 c-pa c-p-t8 c-p-r8 c-br15">
                    <span class="iconfont c-fc-white c-fs20 c-vcAlign-middle">&#xe7bc;</span>
                    <span class="c-fc-white c-ml4">{{item.number}}<span class="c-ph4">·</span>{{item.mainProdType == 61 ? '打卡' : prodTypes[Number(item.mainProdType)]}}</span>
                  </div>
                  <div v-else class="c-fs16 c-ph10 c-translucent-balck50 c-hh26 c-lh28 c-pa c-p-t8 c-p-r8 c-br15">
                    <span class="c-fc-white">{{item.mainProdType == 61 ? '打卡' : prodTypes[Number(item.mainProdType)]}}</span>
                  </div>
                </div>
                <div class="c-fs24 c-fc-xblack c-ww210 c-mt6 c-text-ellipsis2 c-ws-pw">{{item.name}}</div>
              </div>
            </div>
          </div>
          <!-- 非强制表单入口 -->
          <formEntry v-if="dataInfo.hasPermission && ((dataInfo.collectPage==3&& dataInfo.isRelForm == true && dataInfo.hasFormLog == false && isShowFormlg)||(dataInfo.hasFormLog&&dataInfo.enableEdit==2&& isShowFormlg&& dataInfo.isRelForm == true))"
            relType="8"  :relId="combosId"  :dataInfo="dataInfo"
            classObject="c-fs22" fontSizeClass="c-fs20" iconSizeClass="c-fs14" topClass="c-bd-t12-f5"
            @goForm="goForm" ></formEntry>
          <!-- 积分及会员，大转盘，vip入口优惠提示 -->
          <discount-tip
            :hasGiftRelates="dataInfo.giftRelates && dataInfo.giftRelates.length > 0 ? true : false"
            :giftRelatesCount="dataInfo.giftRelates ? dataInfo.giftRelates.length : 0"
            :hasCollocation="!dataInfo.hasPermission && relatedList && relatedList.length > 0 ? true : false"
            :isNew="true"
            :sales="dataInfo.sales"
            :isFriendHelper="dataInfo.isFriendHelper"
            :distributionId="distribution"
            :couponList="couponList"
            :hasCircle="dataInfo && dataInfo.circleList && dataInfo.circleList.length > 0"
            @clickShowCoupon="showCoupon = true"
            @goTOturn="goTOturn"
            @popRelate="popRelate"
            @popGiftModal="popGiftModal"
            @joinCircle="joinCircle"
            :isMarketing='isMarketing'
            :turnName="dataInfo.joinActivityInfo && dataInfo.joinActivityInfo.activityData?dataInfo.joinActivityInfo.activityData.name:''"
            :isiOS='isiOS'
            :showTurn="showTurn"
            :hasPermission='dataInfo.hasPermission'
            :showDiscount="showDiscount"
            :chainInfo="chainInfo"
            :dataInfo="dataInfo"
            v-if="dataInfo && (dataInfo.payType == 2 || (dataInfo.circleList && dataInfo.circleList.length))"
          ></discount-tip>
          <bargain-rules v-if="dataInfo.bargain != null && !dataInfo.hasPermission" :isPreheat="dataInfo.bargain.isPreheat" :status="dataInfo.bargain.status" class="c-bd-t12-f5"></bargain-rules>
        </div>
        <!-- 拼团倒计时 -->
        <collage-persons-list class="c-bd-b12-f5" v-if="isCollage && dataInfo.collage && !dataInfo.hasPermission && (dataInfo.collage.status == 2 || dataInfo.collage.status == 1)" :isCourse="true" :hasExpired="hasExpired" :collage="dataInfo.collage" @startCollage="goCollageDetail(-1,dataInfo.collage.collageId)" @goCollageDetail="gcd"></collage-persons-list>
        <collocation-buy-com :prodInfo="{prodType: 61, prodId: combosId}" :relateCollocationArr="relateCollocation"></collocation-buy-com>
        <more-device class="c-bd-b12-f5" v-if="dataInfo.hasPermission && typeBar == 0" :positionType="moreDeviceType" :prodInfo="{prodType: cfrom.package, prodId: combosId}"></more-device>
        <div class="c-pt40 c-ph24 c-pb20 c-p">
          <div v-if="timingPutOn || isOffSale" class="c-pa c-w100 c-h c-flex-column c-flex-center c-fs24 theme-fc c-pz1">
            <div class="iconfont c-fs46 c-textAlign-c">&#xe8bc;</div>
            <div class="c-fs24 c-pt12 c-textAlign-c">{{isOffSale ? '套餐已下架' : '购买后可看'}}</div>
          </div>
          <div :class="timingPutOn || isOffSale ? 'filter-blur' : ''">
            <course-description :independentCopy="cfg.isCopy" :independentCopyPicture="cfg.isCopyPicture" ref="descriptions" :prodType="cfrom.package" :prodId="combosId"></course-description>
          </div>
        </div>
      </div>
      <!-- 目录 -->
      <div class="c-p" :class="[packageDetail.length > 0 ? 'c-pb20' : '', typeBar == 2 ? (moveDirection == 1 ? 'moveLeft' : moveDirection == 2 ? 'moveRight' : '') : '']" v-show="typeBar == 2">
        <div v-if="cfg && cfg.isDirShow == 0 && (dataInfo.permissionType == 0 || (isOffSale && dataInfo.permissionType == 1))" class="c-pa c-w100 c-h c-flex-column c-flex-center c-fs24 theme-fc c-pz1">
          <div class="iconfont c-fs46 c-textAlign-c">&#xe8bc;</div>
          <div class="c-fs24 c-pt12 c-textAlign-c">{{isOffSale ? '套餐已下架' : isUserGroup ? '指定用户可看' : '购买后可看'}}</div>
        </div>
        <div :class="cfg && cfg.isDirShow == 0 && (dataInfo.permissionType == 0 || (isOffSale && dataInfo.permissionType == 1)) ? 'filter-blur' : ''">
          <div class="c-mb24">
            <div class="c-bg-white c-flex-row c-aligni-center c-ph30 c-pt30 c-w100 c-pz100" v-if="showSearch">
              <div class="c-br30 c-fs24 c-bg-sgray c-hh60 c-flex-row c-justify-sb c-flex-grow1 c-w0 c-aligni-center c-ph24">
                <form action="javascript:;" class="c-w0 c-flex-grow1">
                  <input ref="searchContent" class="input c-w100" @focus="inputFocus" @blur="inputBlur" v-model="searchWord" placeholder="请输入" type="search" @keyup.enter="enterSearch">
                </form>
                <span class="iconfont c-fs24 c-fc-sgray">&#xe6d6;</span>
              </div>
              <div class="c-pl24 c-fs24 c-fc-xblack" @click="cancelSearch">取消</div>
            </div>
            <div class="c-ph24 c-flex-row c-fs22 c-pt30 c-justify-sb" v-if="!showSearch">
              <span class="c-fc-gray" v-if="!showSearch">共{{courseCount}}内容</span>
              <div class="c-ml40" @click="clickSearch">
                <span class="iconfont c-fc-sgray c-fs22 c-mr10">&#xe6d6;</span>
                <span class="c-fc-sblack">搜索</span>
              </div>
            </div>
          </div>
          <template v-if="packageDetail.length > 0">
            <div class="c-flex-row c-pt32 c-bd-b1 c-pb28 c-p c-mh24 c-p" v-for="(item, index) in showPackageDetail" :key="index" :id="'c'+index" @click="setCourseProgress(index, item)">
              <div v-if="!isSearch && dataInfo.learningPosition && JSON.stringify(dataInfo.learningPosition) != '[]' && (index == ((dataInfo.learningPosition.page - 1) * 10 + dataInfo.learningPosition.outIndex))" class="c-p c-fs16 c-flex-row c-ph4 c-hh28 c-lh30 theme-bg c-fc-white c-br4 c-pa c-p-r0 c-p-t0">上次学到</div>
              <div class="c-ww150 c-flex-shrink0 c-p">
                <div v-if="item.type == 1" class="c-ww150 c-maxh100 c-text-hidden c-p">
                  <img class="c-w100 imgCloseBig" :src="$addXossFilter(item.courseAvatar, require('../../../assets/defult270.png'))" alt="" />
                </div>
                <div v-if="item.type == 4" class="c-ww150 c-maxh100 c-text-hidden">
                  <img class="c-w100 imgCloseBig" :src="$addXossFilter(item.cover, require('../../../assets/defult270.png'))" alt="" />
                </div>
                <div v-if="item.type == 5" class="c-ww150 c-maxh100 c-bd1-mgray c-flex-row c-flex-center c-text-hidden">
                  <img v-if="item.datumCover" class="c-w100 imgCloseBig" :src="$addXossFilter(item.datumCover)" alt="" />
                  <img v-else-if="OFFICE_TYPE.indexOf(item.format) > -1" class="c-ww70 imgCloseBig" src="../../../assets/i/wap/datum/icon_doc.png" alt="" />
                  <img v-else-if="IMG_TYPE.indexOf(item.format) > -1" class="c-ww70 imgCloseBig" src="../../../assets/i/wap/datum/icon_pic.png" alt="" />
                  <img v-else-if="AUDIO_TYPE.indexOf(item.format) > -1" class="c-ww70 imgCloseBig" src="../../../assets/i/wap/datum/icon_audio.png" alt="" />
                  <img v-else-if="VIDEO_TYPE.indexOf(item.format) > -1" class="c-ww70 imgCloseBig" src="../../../assets/i/wap/datum/icon_video.png" alt="" />
                  <img v-else class="c-ww70 imgCloseBig" src="../../../assets/i/wap/datum/icon_com.png" alt="" />
                </div>
                <div v-if="item.type == 6" class="c-ww150 c-maxh150 c-flex-row c-flex-center c-text-hidden">
                  <img class="c-w100 imgCloseBig" :src="$addXossFilter(item.avatar, require('../../../assets/examination_defult.png'))" alt="" />
                </div>
                <div v-if="item.type == 7" class="c-ww150 c-maxh150 c-flex-row c-flex-center c-text-hidden">
                  <img class="c-w100 imgCloseBig" :src="$addXossFilter(item.avatar, require('../../../assets/defult_head.png'))" alt="" />
                </div>
                <div v-if="item.type == 8" class="c-ww150 c-maxh100 c-text-hidden c-p">
                  <img class="c-w100 imgCloseBig" :src="$addXossFilter(item.liveCover, require('../../../assets/defult270.png'))" alt="" />
                  <div class="c-pa c-p-l-14 c-p-t10 c-fc-white c-fs14 c-textAlign-c c-pr8 c-pl20 c-hh24 c-lh24 c-bd1-white c-br12 theme-bg" v-if="item.vipDiscount==0 && item.payType == 2">VIP免费</div>
                  <div class="c-pa c-p-l-14 c-p-t10 c-fc-white c-fs14 c-textAlign-c c-pr8 c-pl20 c-hh24 c-lh24 c-bd1-white c-br12 theme-bg" v-else-if="item.svipDiscount==0 && item.payType == 2">SVIP免费</div>
                </div>
                <div v-if="item.type == 15" class="c-ww150 c-maxh100 c-text-hidden c-p">
                  <img class="c-w100 imgCloseBig" :src="$addXossFilter(item.liveCover, require('../../../assets/defult270.png'))" alt="" />
                  <div class="c-pa c-p-l-14 c-p-t10 c-fc-white c-fs14 c-textAlign-c c-pr8 c-pl20 c-hh24 c-lh24 c-bd1-white c-br12 theme-bg" v-if="item.vipDiscount==0 && item.payType == 2">VIP免费</div>
                  <div class="c-pa c-p-l-14 c-p-t10 c-fc-white c-fs14 c-textAlign-c c-pr8 c-pl20 c-hh24 c-lh24 c-bd1-white c-br12 theme-bg" v-else-if="item.svipDiscount==0 && item.payType == 2">SVIP免费</div>
                </div>
                <div v-if="item.type == 10 || item.type == 11|| item.type == 9|| item.type == 13" class="c-ww150 c-maxh100 c-text-hidden">
                  <img class="c-w100 imgCloseBig" :src="$addXossFilter(item.avatar, require('../../../assets/defult270.png'))" alt="" />
                </div>
                <div v-if="item.type == 12" class="c-ww150 c-hh120 c-text-hidden">
                  <img class="c-h imgCloseBig c-m-0auto" :src="$addXossFilter(item.avatar, require('../../../assets/defult270.png'))" alt="" />
                </div>
                <div v-if="item.type == 16" class="c-ww150 c-maxh150 c-flex-row c-flex-center c-text-hidden">
                  <img class="c-w100 imgCloseBig" :src="$addXossFilter(item.avatar, require('../../../assets/examination_defult.png'))" alt="" />
                </div>
              </div>
              <div class="c-ml20 c-flex-column c-minh100 c-justify-sb c-text-hidden c-flex-grow1 c-p">
                <div class="c-fs24 c-fc-xblack c-text-ellipsis2">
                  <span class="c-fs18 c-ph8 c-pv2 c-lh-n theme-bg-10 c-fc-white c-br4 c-mr8 c-p c-vcAlign-middle c-mr10" v-if="item.enableDayPractice==1">
                    <span class="theme-fc c-fs18">每日一练</span>
                    <span class="c-pa prodType-triangle"></span>
                  </span>
                  <span class="c-fs16 c-ph8 c-pv2 c-lh-n theme-bg c-fc-white c-br4 c-p c-vcAlign-middle c-mr10" v-if="item.type==1 &&item.previewLabel==1 && !dataInfo.hasPermission">
                    <span class="c-fs16">{{item.courseType == 1 ? '试听' : '试看'}}</span>
                  </span>
                  <span class="c-fs16 c-ph8 c-pv2 c-lh-n theme-bg c-fc-white c-br4 c-p c-vcAlign-middle c-mr10" v-if="item.type==8 && item.watchTime && item.watchTime > 0 && !dataInfo.hasPermission">
                    <span class="c-fs16">试看</span>
                  </span>
                  {{item.name}}
                </div>
                <div class="c-flex-row c-aligni-center">
                  <div v-if="item.type == 1" class="c-ph10 c-lh26 c-br4 c-hh24 c-fs16 c-fc-xblack c-bd1-ccc c-flex-row c-flex-center c-flex-shrink0">{{item.courseType==0?'视频':(item.courseType==1?'音频':'图文')}}</div>
                  <div v-if="item.type == 4" class="c-ph10 c-lh26 c-br4 c-hh24 c-fs16 c-fc-xblack c-bd1-ccc c-flex-row c-flex-center c-flex-shrink0">专栏</div>
                  <div v-if="item.type == 5" class="c-ph10 c-lh26 c-br4 c-hh24 c-fs16 c-fc-xblack c-bd1-ccc c-flex-row c-flex-center c-flex-shrink0">资料</div>
                  <div v-if="item.type == 6" class="c-ph10 c-lh26 c-br4 c-hh24 c-fs16 c-fc-xblack c-bd1-ccc c-flex-row c-flex-center c-flex-shrink0">测评</div>
                  <div v-if="item.type == 7" class="c-ph10 c-lh26 c-br4 c-hh24 c-fs16 c-fc-xblack c-bd1-ccc c-flex-row c-flex-center c-flex-shrink0">社群</div>
                  <div v-if="item.type == 8" class="c-ph10 c-lh26 c-br4 c-hh24 c-fs16 c-fc-xblack c-bd1-ccc c-flex-row c-flex-center c-flex-shrink0">直播</div>
                  <div v-if="item.type == 9" class="c-ph10 c-lh26 c-br4 c-hh24 c-fs16 c-fc-xblack c-bd1-ccc c-flex-row c-flex-center c-flex-shrink0">练习</div>
                  <div v-if="item.type == 10" class="c-ph10 c-lh26 c-br4 c-hh24 c-fs16 c-fc-xblack c-bd1-ccc c-flex-row c-flex-center c-flex-shrink0">互动测评</div>
                  <div v-if="item.type == 11" class="c-ph10 c-lh26 c-br4 c-hh24 c-fs16 c-fc-xblack c-bd1-ccc c-flex-row c-flex-center c-flex-shrink0">AI测评</div>
                  <div v-if="item.type == 12" class="c-ph10 c-lh26 c-br4 c-hh24 c-fs16 c-fc-xblack c-bd1-ccc c-flex-row c-flex-center c-flex-shrink0">电子书</div>
                  <div v-if="item.type == 15" class="c-ph10 c-lh26 c-br4 c-hh24 c-fs16 c-fc-xblack c-bd1-ccc c-flex-row c-flex-center c-flex-shrink0">直播间</div>
                  <div v-if="item.type == 16" class="c-ph10 c-lh26 c-br4 c-hh24 c-fs16 c-fc-xblack c-bd1-ccc c-flex-row c-flex-center c-flex-shrink0">打卡</div>
                  <div v-if="item.type == 13" class="c-ph10 c-lh26 c-br4 c-hh24 c-fs16 c-fc-xblack c-bd1-ccc c-flex-row c-flex-center c-flex-shrink0">{{item.paperType==1?'考试':'小测试'}}</div>
                  <div v-if="item.type == 1 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(cfrom.course)))" class="c-fs18 c-fc-gray c-ml26 c-flex-shrink0">{{item.plays}}次观看</div>
                  <div v-if="item.type == 12 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(cfrom.ebooks)))" class="c-fs18 c-fc-gray c-ml26 c-flex-shrink0">{{item.viewNum}}次阅读</div>
                  <div v-if="item.type == 4 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(cfrom.column)))" class="c-fs18 c-fc-gray c-ml26">{{item.payType == 2 ? item.sales + (!$isWxAppIos() ? '人已购买' : '人观看') : item.clicks + '人观看'}}</div>
                  <div v-if="item.type == 5" class="c-fs18 c-fc-gray c-ml26">{{item.downloadTimes}}次下载</div>
                  <div v-if="item.type == 6" class="c-fs18 c-fc-gray c-ml26">{{item.sales}}人已{{item.payType == 2 ? (!$isWxAppIos() ? '购买' : '测') : '测'}}</div>
                  <div v-if="item.type == 7" class="c-fs18 c-fc-gray c-ml26">{{item.number}}人已加入</div>
                  <div v-if="item.type == 8" class="c-fs18 c-fc-gray c-ml26">直播时间：{{item.createdAt}}</div>
                  <div v-if="item.type == 9" class="c-fs18 c-fc-gray c-ml26">{{item.payType == 2 ? item.hasTestNum + (!$isWxAppIos() ? '人已购买' : '人参与') : item.hasTestNum + '人参与'}}</div>
                  <div v-if="item.type == 13" class="c-fs18 c-fc-gray c-ml26">{{item.joinNumber + '人参与'}}</div>
                  <div v-if="item.type == 16&& (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(cfrom.clockIn)))" class="c-fs18 c-fc-gray c-ml26">{{item.hasMan + '人参与'}}</div>
                  <div v-if="item.type == 10 || item.type == 11" class="c-fs18 c-fc-gray c-ml26">{{item.consumeType == 2 && item.payType ==2 ? item.sales + (!$isWxAppIos() ? '人已购买' : '人已测') : item.hasTestNum + '人已测'}}</div>
                  <div v-if="item.type == 1" class="c-ml26 c-fs18 c-fc-gray c-text-ellipsis1"><span class="iconfont c-fc-gray c-pt4 c-fs18 c-mr8">&#xe7a8;</span>{{item.lecturer?item.lecturer:"未知"}}</div>
                  <div v-if="item.type == 12" class="c-ml26 c-fs18 c-fc-gray c-text-ellipsis1"><span class="iconfont c-fc-gray c-pt4 c-fs18 c-mr8">&#xe7a8;</span>{{item.author?item.author:"未知"}}</div>
                </div>
              </div>
              <wxOpenWeapp class="c-w100 c-h c-opacity0 pa-im c-pz10" :appId="'wx0d7934cc4cdcdd64'" :path="wxappPath" :pathQuety="wxappQuery" v-if="isShowWxLiveApp(item)">
                <div class="c-w100 c-h">小程序直播跳转</div>
              </wxOpenWeapp>
            </div>
          </template>
          <loading-status-tem :pt20="true" :noData="packageDetail.length == 0" :noDataText="'暂无内容'" :showLoading="isLoading" :noMoreData="is_page == false && (packageDetail.length > 0)"></loading-status-tem>
        </div>
        <div v-if="showGoCurrent" @click="goCurrent" class="theme-fc c-ww200 c-hh64 c-flex-row c-flex-center c-bd1-mgray c-pf c-p-r0 c-bg-white c-br-tl36 c-br-bl36 c-box-shadow3 c-p-b440">
          <span class="iconfont c-fs24">&#xe90f;</span>
          <span class="c-fs22 c-ml12">回到当前学习</span>
        </div>
      </div>
      <!-- 搭配学习 -->
      <div class="c-pt30 c-pb20 c-ph24" :class="typeBar == 0 ? (moveDirection == 3 ? 'moveLeft' : moveDirection == 2 ? 'moveRight' : '') : ''" v-show="typeBar == 3">
        <div class="c-flex-row c-hh100 c-aligni-center" :class="index+1 == relatedList.length ? '' : 'c-mb20'" v-for="(item, index) in relatedList" :key="index" @click="goRevlantDetail(item.mainProdType, item.id)">
          <div class="c-ww150 c-hh100 c-text-hidden c-br8 c-p">
            <div class="c-pa c-p-t0 c-p-l0 c-br-br8 c-flex-row c-flex-center c-translucent-balck60 c-fc-white c-fs16 c-ph8 c-hh24">{{prodTypes[item.mainProdType]}}</div>
            <img :src="item.cover" alt="">
          </div>
          <div class="c-flex-grow1 c-w0 c-hh100 c-ph20 c-fs24 c-fw400 c-flex-column c-justify-sb">
            <p class="c-text-ellipsis2">{{item.name}}</p>
            <p v-if="item.mainProdType != 61 || (item.mainProdType == 61 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(41))))" class="c-fs18 c-fc-gray">{{item.number}}人参与</p>
          </div>
          <div class="c-fc-white c-fs20 c-flex-row c-flex-center c-ph16 c-hh36 c-lh c-br20 theme-bg">加入</div>
        </div>
      </div>
      <!-- 相关推荐 -->
      <div :class="typeBar == 4 ? (moveDirection == 1 ? 'moveLeft' : moveDirection == 2 ? 'moveRight' : '') : ''" class="c-pb20" v-show="typeBar == 4">
        <active-and-column v-if="relationData != ''" :goodsList="relationData.goods" :soicalList="relationData.socials" :examList="relationData.exams" :datumList="relationData.datums" :circleList="relationData.circle"></active-and-column>
      </div>
      <div class="c-pb20" :class="typeBar == 5 ? (moveDirection == 1 ? 'moveLeft' : moveDirection == 2 ? 'moveRight' : '') : ''" v-show="typeBar == 5">
        <commentCom ref="commentCom" v-show="commentStatus == 1" :prodType="cfrom.package" :prodId="combosId" :bindPhoneSetting="bindPhoneSetting" @getCommentCount="getCommentCount"></commentCom>
      </div>
    </section>
    <!-- <more-device :prodInfo="{prodType: cfrom.package, prodId: combosId}" v-if="!$isWxApp() && isWeChat && dataInfo.hasPermission && cfg && cfg.enableMultiLearning == 1 && (cfg.multiLearningPage & 1) == 1 && cfg.multiLearningType > 1 && typeBar == 0"></more-device> -->
    <bottom-buy-com
      ref="bottomBuy"
      :ckFrom="61"
      :isNeedPay="!dataInfo.hasPermission && dataInfo.payType == 2"
      :showNotSale="dataInfo.isSaleOut == 0 && !dataInfo.hasPermission&&dataInfo.payType!=3"
      :notSale="dataInfo.isSaleOut == 0"
      :showShareMoneyTip="true"
      :deductibleAfterInvition="dataInfo.commission"
      :showFriendHelper="dataInfo.hasPermission == false && companyAuth.enableFriendHelper == 1 && ckFrom == cfrom.package && !isCollage && dataInfo.collage == null && dataInfo.isFriendHelper == true"
      :friendHelperStatus="faStatus"
      :showBuyButton="dataInfo.hasPermission == false"
      :showFormText="showFormText"
      :isNew="true"
      :isOffSale="isOffSale"
      :hasExpired="hasExpired"
      :timingPutOn="timingPutOn"
      :delayTime="dataInfo.delayTime"
      :showCommentBtn="showCommentBtnComputed"
      :isGroupPurchase="dataInfo.enterpriseGroup && dataInfo.payType == 2 && dataInfo.isUserGroup != 1"
      @spreadInvite="inviteFriends"
      @invitePoster="invitePoster"
      @clickBuyNow="clickBuyPresent"
      @goHelpDetail="goHelpDetail"
      @goFormDetail="goForm"
      @putOn="putOn"
      @clickComment="addComment"
      @groupPurchase="showGpModal=true;"
    >
      <div v-if="isUserGroup" class="c-fs28 c-lh c-w0 c-flex-grow1 c-flex-row btn-wrap">
        <div class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1 bg-ccc">仅指定用户可{{dataInfo.payType == 2 && !$isWxAppIos() ? '购买' : '观看'}}</div>
      </div>
      <div v-else class="c-lh c-w0 c-flex-grow1 c-flex-row c-fs28 btn-wrap">
        <template
          v-if="!dataInfo.hasPermission &&
            ((isCollage && dataInfo.collage != null && (dataInfo.collage.status == 2 || dataInfo.collage.status == 1)) ||
              (!distributionId && companyAuth.enableFriendHelper == 1 && dataInfo.collage == null && dataInfo.isFriendHelper == true) ||
              (dataInfo.bargain != null && ((dataInfo.bargain.status == 1 && dataInfo.bargain.isPreheat == 1) || dataInfo.bargain.status == 2)))"
        >
          <div v-if="!(isCollage && dataInfo.collage != null && dataInfo.collage.status == 2 && dataInfo.collage.userType != -1)" class="c-hh64 c-flex-column c-flex-center c-pt4 c-w0 c-flex-grow1" @click="clickBuy">
            <span class="c-fs24">{{getBuyBtnTitle}}</span>
            <span class="c-lh c-fs24 c-mt4">{{'￥' | iosPriceFilter}}{{calculationPrice}}</span>
          </div>
          <div v-if="isCollage && dataInfo.collage != null && dataInfo.collage.status == 2 && dataInfo.collage.userType != -1" @click="goCollageDetail(dataInfo.collage.groupId,dataInfo.collage.collageId)" class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1">
            拼团中...
          </div>
          <div v-else-if="isCollage && dataInfo.collage != null && (dataInfo.collage.status == 2 || dataInfo.collage.status == 1) && dataInfo.collage.userType == -1" @click="goBuy(-1,dataInfo.collage.collageId)" :class="dataInfo.collage.status == 1 ? 'c-bg-ccc' : 'theme-bg-gradient'" class="c-hh64 c-flex-column c-flex-center c-pt4 c-w0 c-flex-grow1">
            <span class="c-fs24">发起拼团</span>
            <span class="c-lh c-fs24 c-mt4">{{'￥' | iosPriceFilter}}{{Number(dataInfo.collage.captainPrice).toFixed(2)}}</span>
          </div>
          <div v-else-if="companyAuth.enableFriendHelper == 1 && ckFrom == cfrom.package && !isCollage && dataInfo.collage == null && dataInfo.isFriendHelper == true" @click="goHelpDetail" :class="faStatus == 2 ? 'theme-bg-gradient' : 'c-bg-ccc'" class="c-hh64 c-flex-column c-flex-center c-pt4 c-w0 c-flex-grow1">
            <span class="c-fs24">灌溉领取</span>
            <span class="c-lh c-fs24 c-mt4">{{'￥' | iosPriceFilter}}0.00</span>
          </div>
          <div v-else-if="dataInfo.bargain != null && ((dataInfo.bargain.status == 1 && dataInfo.bargain.isPreheat == 1) || dataInfo.bargain.status == 2) && dataInfo.bargain.userType == 1" @click="handleClickBargainDetail(dataInfo.bargain.bargainId)" class="c-hh64 c-flex-row c-flex-center c-pt4 c-w0 c-flex-grow1">
            正在砍价
          </div>
          <div v-else-if="dataInfo.bargain != null && ((dataInfo.bargain.status == 1 && dataInfo.bargain.isPreheat == 1) || dataInfo.bargain.status == 2)" @click="handleClickBargainDetail(dataInfo.bargain.bargainId)" :class="(dataInfo.bargain.status == 1 && dataInfo.bargain.isPreheat == 1) ? 'c-bg-ccc' : 'theme-bg-gradient'" class="c-hh64 c-flex-column c-flex-center c-pt4 c-w0 c-flex-grow1">
            <span class="c-fs24">砍价享</span>
            <span class="c-lh c-fs24 c-mt4">{{'￥' | iosPriceFilter}}{{Number(dataInfo.bargain.reservePrice).toFixed(2)}}</span>
          </div>
        </template>
        <template v-else>
          <template v-if="!dataInfo.hasPermission">
            <div
              v-if="dataInfo.hasPermission == false && dataInfo.payType==2 && (!isCollage) && ckFrom == cfrom.package && (dataInfo.isFriendHelper == false || companyAuth.enableFriendHelper == 0) && !(dataInfo.bargain && ((dataInfo.bargain.status == 1 && dataInfo.bargain.isPreheat == 1) || dataInfo.bargain.status == 2))"
              class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1" @click="clickBuy"
            >
              立即购买
            </div>
            <div
              v-if="dataInfo.hasPermission == false && dataInfo.payType==3 && (!isCollage) && ckFrom == cfrom.package && (dataInfo.isFriendHelper == false || companyAuth.enableFriendHelper == 0) && !(dataInfo.bargain && ((dataInfo.bargain.status == 1 && dataInfo.bargain.isPreheat == 1) || dataInfo.bargain.status == 2))"
              class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1" @click="inputPsw"
            >
              输入密码
            </div>
            <div
              v-if="(ckFrom == cfrom.flashSalesCombo) && !dataInfo.hasPermission"
              class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1" @click="clickBuy"
            >
              {{getBuyBtnTitle}}
            </div>
            <div
              v-if="dataInfo.hasPermission == false && isCollage && dataInfo.collage != null && dataInfo.collage.status == 2 && dataInfo.collage.userType != -1"
              class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1" @click="goBuy(dataInfo.collage.groupId,dataInfo.collage.collageId)"
            >
              拼团中...
            </div>
            <div
              v-if="dataInfo.hasPermission == false && isCollage && dataInfo.collage != null && (dataInfo.collage.status == 2 || dataInfo.collage.status == 1) && dataInfo.collage.userType == -1"
              class="c-hh64 c-flex-row c-flex-center c-p c-w0 c-flex-grow1" @click.stop="popMarketingBuy"
            >
              购买
              <marketing-buy-btn
                :isCollage="true"
                :showMarketingBuyBtn="showMarketingBuyBtn"
                :calculationPrice="calculationPrice"
                :marketingPrice="Number(dataInfo.collage.captainPrice).toFixed(2)"
                :btnActivate="dataInfo.collage.status == 1 ? false : true"
                @clickBuyNow="clickBuy"
                @marketingBuy="goCollageDetail(-1,dataInfo.collage.collageId)">
              </marketing-buy-btn>
            </div>
            <div
              v-if="dataInfo.hasPermission == false && companyAuth.enableFriendHelper == 1 && ckFrom == cfrom.package && !isCollage && dataInfo.collage == null && dataInfo.isFriendHelper == true"
              class="c-hh64 c-flex-row c-flex-center c-p c-w0 c-flex-grow1" @click.stop="popMarketingBuy"
            >
              灌溉领取
              <marketing-buy-btn
                :isFriendHelp="true"
                :showMarketingBuyBtn="showMarketingBuyBtn"
                :calculationPrice="calculationPrice"
                :btnActivate="faStatus == 2 ? true : false"
                @clickBuyNow="clickBuy"
                @marketingBuy="goHelpDetail">
              </marketing-buy-btn>
            </div>
            <div
              v-if="dataInfo.bargain != null && dataInfo.hasPermission == false && ((dataInfo.bargain.status == 1 && dataInfo.bargain.isPreheat == 1) || dataInfo.bargain.status == 2)"
              class="c-hh64 c-flex-row c-flex-center c-p c-w0 c-flex-grow1" @click.stop="popMarketingBuy"
            >
              购买
              <marketing-buy-btn
                :isBargain="true"
                :showMarketingBuyBtn="showMarketingBuyBtn"
                :calculationPrice="calculationPrice"
                :marketingPrice="Number(dataInfo.bargain.reservePrice).toFixed(2)"
                :btnActivate="(dataInfo.bargain.status == 1 && dataInfo.bargain.isPreheat == 1) ? false : true"
                :isBargaining="dataInfo.bargain.userType == 1 ? true : false"
                @clickBuyNow="clickBuy"
                @marketingBuy="handleClickBargainDetail(dataInfo.bargain.bargainId)">
              </marketing-buy-btn>
            </div>
          </template>
        </template>
      </div>
    </bottom-buy-com>
    <show-integrate :showIntegrate="showIntegrate" :integrateCount="integrateCount" v-if="showIntegrate" @closeShareInt="showIntegrate=false;"></show-integrate>
    <offical-account v-if="dataInfo && dataInfo.bargain" :showAccountQcode="showAccountQcode" :desc="officalDesc" :imgSrc="$addXossFilter(mpQrcode)" @hideDialog="hideDialog"></offical-account>
    <!-- 显示购买赠送积分 -->
    <cj-popup v-model="showPoints" round :closeable="true" close-icon-position="bottom-center" close-icon="icon-shanchu" @closed="clearPoint">
      <div class="c-pt100">
        <img src="../../../../public/i/wap/course/gift.png" alt="" class="point-bg">
        <div class="c-ww500 c-m-0auto c-textAlign-c c-pb30 c-pt70 point-dialog">
          <div class="c-fstyle-i theme-fc c-mt56">
            <span class="c-fs76">{{rewardPoints}}</span>
            {{ customPointName }}
          </div>
          <div class="c-fc-gray c-fs20 c-pt20 c-pb36">恭喜您获得</div>
          <div class="theme-bg c-fs28 c-fc-white c-ww350 c-hh72 c-lh72 c-m-0auto c-br36" @click="goPoint">立即查看</div>
        </div>
        <!-- <div class="c-fc-white icon iconfont c-fs48 c-lh c-pt40 c-m-0auto" @click="showPoints = false">&#xe84e;</div> -->
      </div>
    </cj-popup>
    <open-modal class="c-pz10000" :openModal='popRelateCourse' @closeModal='popRelateCourse = false'>
      <div class="c-bg-white c-pv30 c-ph24 c-br-tl20 c-br-tr20">
        <div class="c-fs26 c-fc-sblack c-fw600">搭配学习</div>
        <div class="c-maxh500 c-minh110 c-mt32 c-contexty-scroll">
          <div class="c-flex-row c-hh100 c-aligni-center" :class="index+1 == relatedList.length ? '' : 'c-mb20'" v-for="(item, index) in relatedList" :key="index"
            @click="goRevlantDetail(item.mainProdType, item.id)">
            <div class="c-ww150 c-hh100 c-text-hidden c-br8 c-p">
              <div class="c-pa c-p-t0 c-p-l0 c-br-br8 c-flex-row c-flex-center c-translucent-balck60 c-fc-white c-fs16 c-ph8 c-hh24">{{item.mainProdType == 110 ? '打卡' : prodTypes[item.mainProdType]}}</div>
              <img :src="$addXossFilter(item.cover)" alt="">
            </div>
            <div class="c-flex-grow1 c-w0 c-hh100 c-ph20 c-fs24 c-fw400 c-flex-column c-justify-sb">
              <p class="c-text-ellipsis2">{{item.name}}</p>
              <p v-if="item.mainProdType != 61 || (item.mainProdType == 61 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(41))))" class="c-fs18 c-fc-gray">{{item.number}}人参与</p>
            </div>
            <div class="c-fc-white c-fs20 c-flex-row c-flex-center c-ph16 c-hh36 c-lh c-br20 theme-bg">加入</div>
          </div>
        </div>
      </div>
    </open-modal>
    <section v-show="commentStatus == 1 && typeBar == 5" @click="addComment('')" class="c-ph24 c-bg-white c-hh88 c-aligni-center c-flex-row c-pf c-w100 c-maxw640 c-p-b0 c-pz9 c-box-shadow5">
      <div class="c-hh60 c-w0 c-flex-grow1 c-lh64 c-textAlign-c c-fs24 c-ph20 c-fc-gray c-bg-f2 c-br30"> 请输入评论内容</div>
    </section>
    <group-guidance ref="guidance" position="bottom" :isType="true" :groupObject="dataInfo.guideData"></group-guidance>
    <coupon-list-com
      @closeModal="closeModal"
      @getCouponList="getCouponList"
      :couponIsPage="couponIsPage"
      :couponLoading="couponLoading"
      :couponList="couponList"
      :showCoupon="showCoupon"
      :prodId="Number(combosId)"
      :prodType="61"
      :dataInfo="dataInfo"
      :chainInfo="chainInfo"
      :isMarketing='isMarketing'
    >
    </coupon-list-com>
    <comfirm-com :pwTip="''" :showPassword="showPassword" :noticeText="noticeText" :text="'请输入密码'" :placeholderText="'请输入密码'" @changePsw="changePsw" @closePassword="showPassword = false" @submitPassword="submitPassword"></comfirm-com>
    <gift-modal :hasBuy="dataInfo.hasPermission" :showGiftModal="popGift" :prodList="dataInfo.giftRelates ? dataInfo.giftRelates : []" @closeGift="popGift = false"></gift-modal>
    <promote-income v-if="dataInfo && dataInfo.isSaleOut != 0 && (showInvitionCard || dataInfo.showMarketingCard)" :showInvitionCard="showInvitionCard" :showMarketingCard="dataInfo.showMarketingCard" :prodId="combosId" :prodType="cfrom.package" @goInvite="inviteFriends" @goMarketingPoster="invitePoster"></promote-income>
    <!-- 入学证书 -->
    <enrol-cer :isReceivedStudy="isReceivedBuy" ref="enrolcerCom" :bigType="2"></enrol-cer>
    <collage-grades ref="collageGrades" :relType="8" :refereeId="refereeId" :isRelForm="dataInfo.isRelForm && !dataInfo.hasFormLog" :extId="combosId" :bindPhoneSetting="bindPhoneSetting" :goodsRoomId="goodsRoomId" :recType="8" :dataInfo="dataInfo"></collage-grades>
    <group-purchase-modal ref="gpModal" @groupPurchasePay="groupPurchasePay" @colseModal="colseModal" v-show="showGpModal"></group-purchase-modal>
  </div>
</template>

<script>
import ActiveAndColumn from "@/components/templates/activeAndColumn.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import showIntegrate from "@/components/templates/common/showIntegrate.vue";
import commentCom from "@/components/templates/common/commentCom.vue";
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import { utilJs } from "@/utils/common.js";
import couponListCom from "@/components/templates/couponListCom.vue";
import FlashSalesTimeNew from "@/components/templates/flashSalesTimeNew.vue";
import DiscountTip from "@/components/templates/common/discountTip.vue";
import CollagePersonsList from "@/components/templates/collage/collagePersonsList.vue";
import BottomBuyCom from "@/components/templates/common/bottomBuyCom.vue";
import groupGuidance from '@/components/templates/common/groupGuidance.vue'
import PriceBar from '@/components/templates/common/priceBar.vue';
import bargainRules from '@/components/templates/bargain/bargainRules';
import officalAccount from '@/components/templates/common/officalAccount';
import buyInforswiper from '@/components/templates/buyInforswiper';
import courseDescription from '@/components/templates/courseDescription';
import ComfirmCom from "@/components/templates/common/comfirmCom.vue";
import OpenModal from "@/components/templates/common/openModal.vue";
import MarketingBuyBtn from "@/components/templates/common/marketingBuyBtn.vue";
import CollectBtnCom from "@/components/templates/common/collectBtnCom.vue";
import giftModal from '@/components/templates/giftModal';
import collocationBuyCom from '@/components/templates/collocationBuyCom';
import PromoteIncome from '@/components/templates/common/promoteIncome.vue';
import validTimeCom from "@/components/templates/common/validTimeCom.vue";
import { goDetails } from "@/utils/goDetails.js";
import { getBindPhoneSetting } from "@/utils/checkUnBindPhone.js";
import enrolCer from "@/components/templates/learnAndachCer/enrolCer.vue";
import formEntry from "@/components/homePage/form/formEntry.vue"
import MoreDevice from "@/components/templates/moreDevice.vue"
import collageGrades from "@/components/templates/collage/collageGrades.vue";
import groupPurchaseModal from "@/components/templates/common/groupPurchaseModal.vue";
import InviteGroup from "@/components/templates/common/inviteGroup.vue";
import wxOpenWeapp from '@/components/templates/common/wxOpenWeapp.vue';
let isClick = false;
let inputScrollTop = 0;
const THEME_RGB_MAP = {
  'mb5_default': '255, 113, 0',
  'mb4_default': '255, 48, 12',
  'mb3_orange': '254, 153, 1',
  'mb3_blue': '0, 153, 255',
  'mb3_ruby': '214, 8, 8',
  'mb3_green': '1, 204, 0',
  'mb3_blown': '151, 104, 0',
  'mb6_default': '36, 138, 253',
  'mb7_blue': '22, 150, 255',
  'mb7_drakBlue': '57,63,81',
  'mb7_orange': '239,124,56',
  'mb7_purple': '110,65,242',
  'mb7_pink': '247,65,99',
  'mb7_blown': '151,104,0',
  'mb7_black': '51,51,51',
  'mb7_green': '48,182,86',
  'mb7_ruby': '214,8,8',
  'mb8_blue': '22, 150, 255',
  'mb8_drakBlue': '57,63,81',
  'mb8_orange': '239,124,56',
  'mb8_purple': '110,65,242',
  'mb8_pink': '247,65,99',
  'mb8_blown': '151,104,0',
  'mb8_black': '51,51,51',
  'mb8_green': '48,182,86',
  'mb8_ruby': '214,8,8',
};
export default {
  name: "PackageDetail",
  components: {
    ActiveAndColumn,
    showIntegrate,
    loadingStatusTem,
    commentCom,
    MySmallTabbar,
    couponListCom,
    FlashSalesTimeNew,
    DiscountTip,
    CollagePersonsList,
    BottomBuyCom,
    groupGuidance,
    PriceBar,
    bargainRules,
    officalAccount,
    buyInforswiper,
    courseDescription,
    ComfirmCom,
    OpenModal,
    MarketingBuyBtn,
    CollectBtnCom,
    giftModal,
    collocationBuyCom,
    PromoteIncome,
    validTimeCom,
    enrolCer,
    formEntry,
    MoreDevice,
    collageGrades,
    groupPurchaseModal,
    InviteGroup,
    wxOpenWeapp
  },
  data() {
    return {
      customPointName: localStorage.getItem("customPointName"),
      OFFICE_TYPE: ["doc", "docx", "pdf", "ppt", "pptx", "xls", "xlsx"],
      IMG_TYPE: [
        "bmp",
        "jpg",
        "png",
        "gif",
        "svg",
        "psd",
        "webp",
        "jpeg",
        "eps",
        "tga",
        "tiff"
      ],
      AUDIO_TYPE: [
        "ogg",
        "mp3",
        "wav",
        "asf",
        "wma",
        "mp3pro",
        "real",
        "ape",
        "module",
        "midi",
        "vqf"
      ],
      VIDEO_TYPE: [
        "avi",
        "wmv",
        "mpeg",
        "asf",
        "mpg",
        "dv",
        "rm",
        "rmvb",
        "mod",
        "flv",
        "mp4",
        "qt",
        "divx",
        "mkv",
        "vob"
      ],
      prodTypes: {
        '9': '专栏',
        '8': '资料',
        '11': '测评',
        '75': '互动测评',
        '77': '语音测评',
        '78': '训练营',
        '10': '社群',
        '7': '活动',
        '51': '直播',
        '41': '打卡',
        '76': '表单',
        '12': '商城',
        '53': '约课',
        '86': '预约',
        '1': '会员',
        '23': '会员',
        '61': '打卡', //仅用于搭配学习
      },
      typeBar: 0,
      tabhBarFixed: false,
      combosId: "",
      dataInfo: "",
      packageDetail: [],
      cfrom: global.ckFrom,
      ckFrom: global.ckFrom.package,
      cId: -1,
      extId: -1,
      relationData: "",
      isShowPresent: false,
      isiOS: navigator.userAgent.indexOf('IOSLogin') > -1 || navigator.userAgent.indexOf('IOSNewLogin') > -1 || navigator.userAgent.indexOf("IOSNewApp") > -1,
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      enableBuyedInfoSwiper: JSON.parse(localStorage.getItem("cfg")).enableBuyedInfoSwiper ? JSON.parse(localStorage.getItem("cfg")).enableBuyedInfoSwiper : 0,
      isCollage: false,
      showShareMoneyTip: true,
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      showPoints: false,
      rewardPoints: 0,
      accessToken: '',
      vipType: localStorage.getItem("vipType" + localStorage.getItem("userId")),
      isShowFormlg:localStorage.getItem("showForm") == 1 ? true : false,
      showPassword: false, //显示密码输入
      noticeText: '',
      hasGetRelation: false,
      tabList: [{
        title: '详情',
        index: 0,
      }],
      showCoupon: false,
      couponList: [],
      couponIsPage: false,
      couponPage: 1,
      couponLoading: false,
      commentStatus: 0,
      relatedList: [], //课程搭配打卡
      showIntegrate: false, //获取积分提示
      integrateCount: 0,
      showFormText: false,
      isSalesBegin: false, // 判断限时购正在进行
      showAccountQcode: false,
      officalDesc: '关注我们后才可发起砍价哦',
      mpQrcode: '', //二维码
      is_page: false,
      page: 1,
      isLoading: false,
      courseCount: "",
      swiperList: [],
      descriptList: [],
      cfg: JSON.parse(localStorage.getItem("cfg")) || {},
      isApp: false,
      popRelateCourse: false,
      showMarketingBuyBtn: false,
      hasExpired: false,
      showSearch: false,
      searchWord: "",
      timingPutOn: false,
      moveDirection: 0, //1点击靠右的tab；2点击靠左的tab
      isOffSale: false, //是否下架
      isCollect: false,
      bindPhoneSetting: null,
      showGoCurrent: false,
      isSearch: false,
      popGift: false, //赠送礼包
      relateCollocation: [],
      isReceivedBuy:0,
      enableShowModuleView: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableShowModuleView : 1,
      enableHiddenModules: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableHiddenModules : [],
      chainInfo: '',
      isChainProd: false,
      optimal: null, // 最低价格返回对象
      isWeChat: utilJs.isWeiXin(),
      showGpModal: false,
      moreDeviceType: 1, //1: 页面中间 2：固定在底部 进入页面在页面中间，向上滚动后固定在底部
      wxappPath: '',
      wxappQuery: '',
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {

  },
  computed: {
    // 套壳履约小程序是否显示直播跳转创匠直播判断
    isShowWxLiveApp() {
      return function(lessonInfo) {
        let type = lessonInfo.type;
        let typeArr = [5, 5, 5, 5, 9, 8, 11, 10, 51, 129, 75, 77, 142, 125, 181, 180];
        type = typeArr[Number(type)];
        return utilJs.getFromApplicationNum() == 5 && (type == 51 || type == 180);
      }
    },
    showMarketingBar() {
      return this.dataInfo && !this.dataInfo.hasPermission &&
        (
          this.dataInfo.sales ||
          (this.dataInfo.bargain && ((this.dataInfo.bargain.status == 1 && this.dataInfo.bargain.isPreheat == 1) || this.dataInfo.bargain.status == 2)) ||
          (this.dataInfo.collage && (this.dataInfo.collage.status == 2 || this.dataInfo.collage.status == 1)) ||
          this.dataInfo.isFriendHelper
        )
    },
    // 获取按钮专享价名称
    getBuyBtnTitle() {
      if (this.optimal) {
        const agentName = utilJs.getCustNameMap();
        let btnTxt = '立即购买';
        let chainPrice = this.chainInfo && this.chainInfo.isChainProd ? (this.chainInfo.enableReorderDiscount == 1 && this.chainInfo.isReorder ? this.chainInfo.reorderBonus : this.chainInfo.enableOrderDiscount == 1 ? this.chainInfo.orderBonus : this.dataInfo.price) : this.dataInfo.price;
        let idDiscount = (this.vipType == 3 || this.vipType > 4) && this.dataInfo.commonProdInfo && this.dataInfo.commonProdInfo.agentDiscount < 100
          ? this.dataInfo.commonProdInfo.agentDiscount
          : (this.vipType == 4 && this.dataInfo.svipDiscount < 100)
            ? this.dataInfo.svipDiscount
            : (this.vipType == 2 && this.dataInfo.vipDiscount < 100)
              ? this.dataInfo.vipDiscount
              : 100
        let discountPrice = Number(this.dataInfo.price * idDiscount / 100).toFixed(2);
        if (this.chainInfo && this.chainInfo.isChainProd && Number(chainPrice) <= Number(discountPrice)) {
          let chainName = this.chainInfo.enableReorderDiscount == 1 && this.chainInfo.isReorder ? '复购' : (this.chainInfo.userType == 1 ? '普通用户' : this.chainInfo.userType2Name[this.chainInfo.userType])
          btnTxt = chainPrice != this.dataInfo.price && chainName ? chainName + '专享价' : '立即购买';
        } else {
          btnTxt = discountPrice * 1 != this.dataInfo.price ? (this.vipType != 1 ? (this.vipType == 2 ? 'VIP专享价' : this.vipType == 4 ? 'SVIP专享价' : agentName[this.vipType] + '专享价') : '立即购买') : '立即购买';
        }
        if (this.dataInfo.sales && this.optimal.optimalPriceType == 101) {
          btnTxt = '立即购买';
        }
        return btnTxt
      }
      return '立即购买'
    },
    // 判断是否有顶部导航
    unenableTopNav() {
      return this.companyAuth && this.companyAuth.companyTopNav && this.companyAuth.companyTopNav.style && this.companyAuth.companyTopNav.style == 5
    },
    showInvitionCard() {
      let showInvitionCardTmp = this.dataInfo.isInvitationCard && (!this.isCollage) && !this.dataInfo.isFriendHelper && this.dataInfo.collage == null && this.dataInfo.sales == null && this.dataInfo.bargain == null
      return showInvitionCardTmp
    },
    showPackageDetail() {
      return this.packageDetail.filter(function (packageDetailItem) {
        return packageDetailItem.isShow == 1;
      })
    },
    //营销原价计算价格
    calculationPrice() {
      let idDiscount = (this.vipType == 3 || this.vipType > 4) && this.dataInfo.commonProdInfo && this.dataInfo.commonProdInfo.agentDiscount < 100
        ? this.dataInfo.commonProdInfo.agentDiscount
        : (this.vipType == 4 && this.dataInfo.svipDiscount < 100)
          ? this.dataInfo.svipDiscount
          : (this.vipType == 2 && this.dataInfo.vipDiscount < 100)
            ? this.dataInfo.vipDiscount
            : 100;
      let calculationPrice = Number(this.dataInfo.price * idDiscount / 100).toFixed(2);
      if (this.optimal) {
        // 链动价格
        let chainPrice = this.chainInfo && this.chainInfo.isChainProd ? (this.chainInfo.enableReorderDiscount == 1 && this.chainInfo.isReorder ? this.chainInfo.reorderBonus : this.chainInfo.enableOrderDiscount == 1 ? this.chainInfo.orderBonus : this.dataInfo.price) : this.dataInfo.price;
        // 当链动价格存在且链动价格跟常规身份价格对比时，如果链动小于或者等于身份价格取链动价格
        calculationPrice = this.chainInfo && this.chainInfo.isChainProd && Number(chainPrice) <= Number(calculationPrice) ? chainPrice : calculationPrice;
        if (this.dataInfo.isFriendHelper) {
          calculationPrice = Number(this.optimal.optimalPrice).toFixed(2);
        }
      }
      return calculationPrice;
    },
    //单卖&&没有权限&&价格大于0&&（加入形式&&不是好友助力）&&（优惠券||vip svip折扣信息||积分抵扣）&&（是否参与营销）
    showDiscount() {
      let showdiscount = this.dataInfo.isSaleOnly != 0 && this.dataInfo.hasPermission == false && this.dataInfo.payType == 2
      return showdiscount
    },
    //是否是营销活动
    isMarketing() {
      let isMarketing = this.dataInfo &&
      (this.dataInfo.sales || (this.dataInfo.sales || (this.dataInfo.bargain && ((this.dataInfo.bargain.status == 1 && this.dataInfo.bargain.isPreheat == 1) || this.dataInfo.bargain.status == 2))) ||
      (this.dataInfo.collage && (this.dataInfo.collage.status == 2 || this.dataInfo.collage.status == 1)) || this.dataInfo.isFriendHelper)
      return isMarketing
    },
    //不显示优惠券
    isFavourable() {
      let isFavourable = this.dataInfo && ((this.dataInfo.bargain && ((this.dataInfo.bargain.status == 1 && this.dataInfo.bargain.isPreheat == 1) || this.dataInfo.bargain.status == 2)) || this.dataInfo.isFriendHelper)
      return isFavourable
    },
    //大转盘是否显示
    showTurn() {
      let showturn = this.dataInfo.joinActivityInfo
      && this.dataInfo.joinActivityInfo.isJoinActivity == 1
      && !(
        ((this.vipType == 3 || this.vipType > 4) && this.dataInfo.commonProdInfo && this.dataInfo.commonProdInfo.agentDiscount == 0) ||
        (this.vipType == 2 && this.dataInfo.vipDiscount == 0) ||
        ((this.vipType == 2 || this.vipType == 4) && this.dataInfo.svipDiscount == 0)
      )
      return showturn;
    },
    // 是否显示评论
    showCommentBtnComputed() {
      // enableComment 1: 详情开启评论，0：隐藏评论，2：使用全局设置判断是否开启评论
      let isShowComment = false;
      if (this.dataInfo.enableComment == 1 && this.dataInfo.hasPermission) {
        isShowComment = true;
      } else if (this.dataInfo.enableComment == 0) {
        isShowComment = false;
      } else if (this.dataInfo.enableComment == 2) {
        // dataInfo.hasPermission && cfg && cfg.enableComment == 1
        if (this.cfg && this.cfg.enableComment == 1 && this.dataInfo.hasPermission) {
          if (this.cfg && this.cfg.enableComboComment == 1) {
            isShowComment = true;
          } else {
            isShowComment = false;
          }
        } else {
          isShowComment = false;
        }
      }
      return isShowComment;
    },
    isUserGroup() { // true: 指定用户购买或者观看，但是该用户不属于指定用户  false：非指定用户购买或者观看，或者该用户属于指定用户
      let isUserGroup = ((!this.dataInfo.hasPermission) || (this.dataInfo.hasPermission && (this.dataInfo.permissionType == 1 || this.dataInfo.permissionType == 2 || this.dataInfo.permissionType == 3 || this.dataInfo.permissionType == 18 || this.dataInfo.permissionType == 19))) && (this.dataInfo.isUserGroup == 1 && this.dataInfo.isInUserGroup != 1);
      return isUserGroup;
    },
    showInviteGroup() { //是否展示引导入群入口 dataInfo.guideData.showPosition 1:获得权限前展示 2:获得权限后展示 3:始终展示
      let showPosition = this.dataInfo && this.dataInfo.guideData && (this.dataInfo.guideData.showPosition == 3 || (this.dataInfo.guideData.showPosition == 1 && (!this.dataInfo.hasPermission || this.dataInfo.payType == 1)) || (this.dataInfo.guideData.showPosition == 2 && this.dataInfo.hasPermission))
      let inviteGroup = this.dataInfo && this.dataInfo.guideData && showPosition && this.dataInfo.guideData.isOpenGuide == 1 && this.dataInfo.guideData.guideType.includes(1);
      return inviteGroup
    }
  },
  watch: {
    $route(to, from) {
      // 新增课程可以关联课程后，可能会从出现从音频详情页跳入音频详情页的情况，无法进入activate
      if (to.path == '/homePage/package/packageDetail' && from.path == '/homePage/package/packageDetail') {
        this.initData();
        this.getMoreCourse();
        this.getPackageDetail();
      }
    },
  },
  methods: {
    getCommentCount(count = 0) {
      if (count && count > 0) {
        const index = this.tabList.findIndex(i => i.title == '评论')
        index > -1 && this.$set(this.tabList[index], "smallNum", count);
      }
    },
    addComment() {
      const item = this.tabList.find(i => i.title == '评论') || {}
      this.typeBar = item.index || 0
      this.$nextTick(() => {
        if (this.$refs.commentCom) {
          this.$refs.commentCom.public_addComment()
        }
      })
    },
    popPresentCourse() {
      if (this.$refs.bottomBuy) {
        this.$refs.bottomBuy.isShowPresent = true;
      }
    },
    judgeCompliance() {
      let postUrl = `${global.apiurl}Certificate/judgeCompliance?prodType=${global.ckFrom.package}&prodId=${this.combosId}`;
      // enableStudyCard	number
      // 是否有设置学习证书1=是；0=否
      // isReceivedStudy	number
      // 是否已经领取了证书：1=是；0=否
      // isComplianceStudy	number
      // 是否达到学习证书发放条件：1=是；0否
      // studyHonorImage	string
      // 学习证书图片（如果领取了会有图片）
      // enableBuyCard	number
      // 是否有设置入学证书1=是；0=否
      // isReceivedBuy	number
      // 是否已经领取了入学证书：1=是；0=否
      // isComplianceBuy	number
      // 是否达到入学证书发放条件：1=是；0否
      // buyHonorImage	string
      // 入学证书证书图片（如果领取了会有图片）
      utilJs.getMethod(postUrl, res => {
        if (res.enableBuyCard == 1 && res.isComplianceBuy == 1 && res.isReceivedBuy == 0) {
          this.isReceivedBuy = res.isReceivedBuy
          let enrolCerLoca = global.ckFrom.package + '-' + this.combosId
          if (JSON.parse(localStorage.getItem("enrolCer")) == enrolCerLoca) {
              return
          } else {
            this.$refs.enrolcerCom.drawNow('', this.combosId, global.ckFrom.package)
          }
        }
      });
    },
    getProdRelateCollocation() {
      utilJs.getMethod(`${global.apiurl}prodsCollocation/getProdRelateCollocation?prodType=61&prodId=${this.combosId}`,
        res => {
          this.relateCollocation = res.data ? res.data.slice(0, 3) : [];
        }
      );
    },
    goCurrent() {
      let currentOffsetTop = document.querySelector('#c' + Number((this.dataInfo.learningPosition.page - 1) * 10 + this.dataInfo.learningPosition.outIndex)).offsetTop;
      let contentWrapOffsetTop = document.querySelector('#contentWrap').offsetTop;
      window.scrollTo(0, (currentOffsetTop + contentWrapOffsetTop - 200));
    },
    doCollect() {
      this.isCollect = true;
    },
    cancelCollect() {
      this.isCollect = false;
    },
    putOn() {
      this.dataInfo.status = 1;
      this.timingPutOn = false;
    },
    //IOS微信6.7以上版本会导致输入法收起的时候，键盘没收起，需要手动滚下屏幕
    inputFocus() {
      if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        inputScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      }
    },
    inputBlur() {
      if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        setTimeout(() => {
          document.body.scrollTop = inputScrollTop - 1 || 0;
        });
      }
    },
    // enter搜索
    enterSearch() {
      this.page = 1;
      this.packageDetail = [];
      this.isSearch = true;
      this.getMoreCourse();
      this.$refs.searchContent.blur();
    },
    // 点击搜索
    clickSearch() {
      this.showSearch = true;
      this.$nextTick(function () {
        this.$refs.searchContent.focus();
      });
    },
    // 取消搜索
    cancelSearch() {
      this.showSearch = false;
      this.searchWord = '';
      this.page = 1;
      this.packageDetail = [];
      this.isSearch = false;
      this.getMoreCourse();
    },
    setCourseProgress(index, cItem) {
      if (this.showSearch) {
        this.clickGoDetail(cItem);
        return;
      }
      let data = {
        prodId: this.combosId,
        prodType: 61,
        cType: 1,
        page: Math.floor(index / 10) + 1,
        outIndex: index % 10
      };
      // let postUrl = `${global.apiurl}column/${this.extId}/progress`;
      let postUrl = `${global.apiurl}analysis/course/positionLog`;
      utilJs.postMethod(postUrl, data, res => {
        this.clickGoDetail(cItem)
      });
    },
    popMarketingBuy() {
      this.showMarketingBuyBtn = true;
    },
    popRelate() {
      this.popRelateCourse = true;
    },
    popGiftModal() {
      this.popGift = true;
    },
    joinCircle() {
      this.$routerGo(this, "push", {
        path: "/homePage/circle/circleFeed",
        query: {id: this.dataInfo.circleList[0].circleId}
      });
    },
    changePsw() {
      this.noticeText = "";
    },
    //提交密码
    submitPassword(inputPwd) {
      if (!inputPwd.trim()) {
        this.noticeText = "*密码错误";
        return;
      }
      if (isClick) {
        return;
      }
      isClick = true;
      utilJs.postMethod(global.apiurl + "common/verifyEncrypt", {
        encrypt: inputPwd,
        prodType: global.ckFrom.package,
        id: this.combosId
      }, res => {
        isClick = false;
        if (res.code == 500) {
          this.noticeText = "*密码错误";
        } else if (res.code == 200) {
          this.showPassword = false;
          this.tabList = [{
            title: '详情',
            index: 0,
          }];
          this.getPackageDetail()
        }
      },
        failRes => {
          isClick = false;
        }
      );
    },
    inputPsw() {
      if (this.bindPhoneSetting && this.bindPhoneSetting.passwordBind && utilJs.goBindMobile()) {
        let pathQuery = {};
        if (this.goodsRoomId) {
          pathQuery.goodsRoomId = this.goodsRoomId;
        }
        utilJs.goBindMobile(pathQuery);
      } else {// 有关联表单，则跳到报名表单处
        if (this.dataInfo.collectPage != 3 && this.dataInfo.isRelForm == true && this.dataInfo.hasFormLog == false && localStorage.getItem("showForm") == 1) {
          this.goForm('');
        } else {
          this.noticeText = "";
          this.showPassword = true;
        }
      }
    },
    //购买信息
    buyedInfoSwiper() {
      let that = this
      utilJs.getMethod(`${global.apiurl}common/buyedInfoSwiper?prodId=${that.combosId}&prodType=${global.ckFrom.package}`, function (res) {
        that.swiperList = res
      }, failRes => {
      });
    },
    hideDialog() {
      this.showAccountQcode = false;
    },
    // 判断是否关注公众号
    checkUserIsFollowedMp() {
      let _this = this;
      return new Promise(function (resolve, reject) {
        utilJs.getMethod(`${global.apiurl}bargains/getMpData?bargainId=${_this.dataInfo.bargain.bargainId}`,
          res => {
            resolve(res);
          },
          failRes => {
            reject(failRes)
          }
        )
      })
    },
    // 砍价跳转
    handleClickBargainDetail(bargainId) {
      if (this.dataInfo.bargain.status == 1) {
        this.$showCjToast({
          text: '活动未开始，暂不能砍价！',
          type: 'text'
        });
        return;
      }
      this.checkUserIsFollowedMp().then(res => {
        if (res.threshold == 2 && res.isFollowedMp == 0) {
          this.mpQrcode = res.mpQrcode;
          this.showAccountQcode = true;
          return;
        }
        if (this.bindPhoneSetting && this.bindPhoneSetting.buyBind && utilJs.goBindMobile()) {
          return;
        }
        // 有关联表单，则跳到报名表单处
        if (this.dataInfo.collectPage == 1 && this.dataInfo.isRelForm == true && this.dataInfo.hasFormLog == false && localStorage.getItem("showForm") == 1) {
          this.goForm(bargainId);
        } else {
          if (this.dataInfo.bargain.status == 2) {
            this.$routerGo(this, "push", {
              path: "/homePage/bargain/bargainDetail",
              query: {
                bargainId: bargainId
              }
            });
          }
        }
      })
    },
    handleShowGuidePop() {
      // 显示入群引导
      this.$refs.guidance.isShowPop();
    },
    //分享回调领取积分(只能领取一次)
    shareGetIntegration() {
      if ((this.companyAuth.enableShareComboPoint == 1 && this.companyAuth.pointModel == 1) || (this.companyAuth.enableShareCombo == 1 && this.companyAuth.pointModel == 2)) {
        let $this = this;
        //积分来源 51：分享知识套餐 57：分享知识套餐（每日）
        let data = {
          cId: -1,
          extId: $this.combosId,
          pointFrom: $this.companyAuth.pointModel == 1 ? 51 : 57,
          duration: -1
        };
        utilJs.postMethod(`${global.apiurl}common/getPoints`, data, function (
          res
        ) {
          let integrateCount = res.points;
          if (integrateCount > 0) {
            $this.integrateCount = integrateCount;
            $this.showIntegrate = true;
          }
        });
      }
    },
    clickBuyPresent() {
      this.isShowPresent = true;
      this.clickBuy();
    },
    // 获取搭配学习列表
    getRelatedList() {
      utilJs.getMethod(`${global.apiurl}matchRelate/getMainList?prodType=61&prodId=${this.combosId}`, (res) => {
        this.relatedList = [...this.relatedList, ...res.matchList];
      });
    },
    //点击搭配学习
    goRevlantDetail(type, id) {
      let toPath = '';
      if (type == 10) {
        toPath = `/homePage/socialGroup/socialGroupInfo?SocialRoomId=${id}`;
      } else if (type == 61) {
        toPath = `/homePage/clockIn/clockInDetail?clockInId=${id}`;
      }
      this.$routerGo(this, "push", { path: toPath });
    },
    closeModal() {
      this.showCoupon = false;
    },
    //获取可以领取的优惠券
    getCouponList: function () {
      if (!this.couponLoading) {
        this.couponLoading = true;
        let $this = this;
        utilJs.getMethod(global.apiurl + 'redeemCodes/getCouponsByRedeemType?courseId=' + this.combosId + '&redeemType=45&limit=10&page=' + this.couponPage, function (res) {
          $this.couponLoading = false;
          $this.couponList = $this.couponList.concat(res.data);
          $this.couponPage = res.next_page_url ? ($this.couponPage + 1) : $this.couponPage;
          $this.couponIsPage = res.next_page_url ? true : false;
        },
          failRes => {
            $this.couponLoading = false;
          }
        );
      }
    },
    //活动海报
    invitePoster: function () {
      if (this.bindPhoneSetting && this.bindPhoneSetting.shareBind) {
        if (utilJs.goBindMobile()) return;
      }
      let ckFrom = global.ckFrom.package;//this.ckFrom;
      let type = this.dataInfo.collage ? 3 : this.dataInfo.sales ? 2 : this.dataInfo.bargain ? 5 : 4;
      let cId = this.dataInfo.isFriendHelper ? this.dataInfo.faId : this.dataInfo.collage ? this.dataInfo.collage.collageId : this.dataInfo.bargain ? this.dataInfo.bargain.bargainId : this.dataInfo.sales ? this.dataInfo.sales.pId : '';
      let proId = this.combosId;
      this.$routerGo(this, "push", { path: '/homePage/spread/spreadPoster', query: { cId: cId, type: type, ckFrom: ckFrom, proId: proId } });
    },
    //友情灌溉倒计时
    friendTimeFn: function () {
      let stime = this.dataInfo ? utilJs.getTimeByDate(this.dataInfo.faStartAt) : 0;
      let etime = this.dataInfo ? utilJs.getTimeByDate(this.dataInfo.faEndAt) : 0;
      let nowTime = (new Date()).getTime();
      //faStatus 1未开始,2进行中,3已结束,4已停止
      let time = '';
      if (stime > nowTime) {
        this.faStatus = 1;
        time = this.dataInfo.faStartAt;
      } else if (etime > nowTime) {
        this.faStatus = 2;
        time = this.dataInfo.faEndAt;
      }
      return time;
    },
    //友情灌溉倒计时结束修改状态
    friendFinishFn: function () {
      if (this.faStatus == 1) {
        this.faStatus = 2;
        this.friendTimeFn();
      } else {
        this.dataInfo.isFriendHelper = false;
        this.faStatus = 3;
      }
    },
    getCommentStatus() {
      this.commentStatus = 0
      if (this.dataInfo.enableComment == 1 || (this.dataInfo.enableComment == 2 && this.cfg.enableComment == 1 && this.cfg.enableComboComment == 1)) {
        this.commentStatus = 1;
        this.$nextTick(() => {
          this.$refs.commentCom && this.$refs.commentCom.public_initData()
        })
      }
    },
    goVipBuy(cmpId, type) {
      this.$routerGo(this, "push", {
        path: "/member/vip/vipUp",
        query: { 'prodId': cmpId, 'type': type }
      });
    },
    // 跳转积分明细
    goPoint() {
      this.$routerGo(this, "push", {
        path: `/member/myIntegral/integralDetail?tabIndex=-1`
      });
    },
    // 清除赠送积分
    clearPoint() {
      this.showPoints = false
      sessionStorage.removeItem(this.combosId + 'rewardPoints');
    },
    // // 限时购倒计时
    falshSalesTime(status) {
      if (this.dataInfo.sales) {
        this.dataInfo.sales.sales.status = status
      } else if (this.dataInfo.collage) {
        this.dataInfo.collage.status = status
      } else if (this.dataInfo.isFriendHelper) {
        this.faStatus = status;
      } else if (this.dataInfo.bargain) {
        this.dataInfo.bargain.status = status
      }
    },
    // // 限时购倒计时结束
    finishFlashSales(status) {
      if (this.dataInfo.sales) {
        this.dataInfo.sales.sales.status = status
      } else if (this.dataInfo.collage) {
        this.dataInfo.collage.status = status
      } else if (this.dataInfo.isFriendHelper) {
        this.faStatus = status;
      } else if (this.dataInfo.bargain) {
        this.getPackageDetail();
      }
      if (status == 2) {
        this.ckFrom = global.ckFrom.flashSalesCombo;
      } else {
        this.ckFrom = global.ckFrom.package;
      }
      if (status == -1) {
        this.dataInfo.sales = null;
      }
    },
    //助力详情
    goHelpDetail: function () {
      if (this.bindPhoneSetting && this.bindPhoneSetting.helpBind && utilJs.goBindMobile()) {
        return;
      }
      if (this.faStatus == 1) {
        this.$showCjToast({
          text: '活动未开始，暂不能助力领取！',
          type: 'text'
        });
      } else {
        this.$routerGo(this, "push", {
          path: "/homePage/task/task",
          query: { 'faId': this.dataInfo.faId, 'refereeId': localStorage.getItem("userId") }
        });
      }
    },
    //拼团倒计时
    timeFn: function () {
      let stime = this.dataInfo ? utilJs.getTimeByDate(this.dataInfo.collage.startTime) : 0;
      let etime = this.dataInfo ? utilJs.getTimeByDate(this.dataInfo.collage.endTime) : 0;
      let nowTime = (new Date()).getTime();
      //.collage.status 1未开始,2进行中,3已结束,4已停止
      let time = '';
      if (stime > nowTime) {
        this.dataInfo.collage.status = 1;
        time = this.dataInfo.collage.startTime;
      } else if (etime > nowTime) {
        this.dataInfo.collage.status = 2;
        time = this.dataInfo.collage.endTime;
      } else {
        this.dataInfo.collage.status = 3;
      }
      return time;
    },
    //拼团倒计时结束后修改状态
    finishFn: function () {
      if (this.dataInfo.collage.status == 1) {
        this.dataInfo.collage.status = 2;
        this.timeFn();
      } else {
        this.dataInfo.collage.status = 3;
      }
    },
    gcd: function (cinfo) {
      this.goCollageDetail(cinfo.groupId, cinfo.collageId);
    },
    //跳转到拼团详情页
    goCollageDetail: function (groupId, collageId) {
      if (this.isUserGroup) {
        this.$showCjToast({
          text: '指定用户可以购买',
          type: 'text'
        });
        return;
      }
      if (this.dataInfo.collage.userType != -1 && this.dataInfo.collage.groupId != groupId) {
        this.$showCjToast({
          text: '您已在拼团中，不需要再去拼单啦！',
          type: 'text'
        });
      } else {
        if (this.dataInfo.collage.status == 1) {
          this.$showCjToast({
            text: '活动未开始，暂不能拼团！',
            type: 'text'
          });
        } else {
          let hfs = this.dataInfo.isRelForm && !this.dataInfo.hasFormLog;
          let pathQuery = {
            'groupId': groupId,
            'collageId': collageId,
            isRelForm: hfs,
            extId: this.combosId,
            relType: 8
          };
          if (this.goodsRoomId) {
            pathQuery.goodsRoomId = this.goodsRoomId;
          }
          this.$routerGo(this, "push", {
            path: "/homePage/collage/collageDetail",
            query: pathQuery
          });
        }
      }
    },
    //跳转到拼团详情页
    goBuy: function (groupId, collageId) {
      if (this.isUserGroup) {
        this.$showCjToast({
          text: '指定用户可以购买',
          type: 'text'
        });
        return;
      }
      if (this.dataInfo.collage.userType != -1 && this.dataInfo.collage.groupId != groupId) {
        this.$showCjToast({
          text: '您已在拼团中，不需要再去拼单啦！',
          type: 'text'
        });
      } else {
        if (this.dataInfo.collage.status == 1) {
          this.$showCjToast({
            text: '活动未开始，暂不能拼团！',
            type: 'text'
          });
        } else {
          //要加判断是否选择阶梯
          if (this.dataInfo.collage && this.dataInfo.collage.collageGroupType == 1 ) {
            this.$refs.collageGrades.goChoseBuy()
          } else {
            this.$refs.collageGrades.showBuy()
            // this.isShowBuy = true; //选择阶梯
          }
        }
      }
    },
    inviteFriends: function () {
      if (this.bindPhoneSetting && this.bindPhoneSetting.shareBind && utilJs.goBindMobile()) {
        return
      }
      this.$routerGo(this, "push", {
        path: "/homePage/spread/spreadCustom",
        query: { cId: this.cId, extId: this.combosId, ckFrom: this.ckFrom }
      });
    },
    getRelation: function () {
      let $this = this;
      utilJs.postMethod(
        global.apiurl + "common/relevance",
        { objId: this.combosId, ckFrom: global.ckFrom.package },
        function (res) {
          $this.hasGetRelation = true;
          $this.relationData = res;
          if ($this.relationData && ($this.relationData.columns.length > 0 || $this.relationData.courses.length > 0 || $this.relationData.datums.length > 0 || $this.relationData.exams.length > 0 || $this.relationData.goods.length > 0 || $this.relationData.mutuals.length > 0 || $this.relationData.socials.length > 0 || $this.relationData.speechs.length > 0 || $this.relationData.circle.length > 0)) {
            $this.tabList.push({
              title: '相关',
              index: 4,
            });
          }
        }
      );
    },
    watchRecord: function () {
      let data = {
        ckFrom: global.ckFrom.package,
        extId: this.combosId,
        cId: this.cId
      };
      utilJs.postMethod(global.apiurl + "common/playRecord", data, function (
        res
      ) { });
    },
    changeType: function (type, changeDir) {
      //this.typeBar = typeBar;
      if (this.typeBar != type) {
        this.moveDirection = changeDir;
        this.typeBar = type;
        this.handleScroll();
      }
      return false;
    },
    getMoreCourse() {
      if (this.isLoading) {
        return;
      }
      this.isLoading = true;
      let limit10 = 50;
      if (!this.isSearch &&
        this.page == 1 &&
        this.dataInfo.learningPosition &&
        JSON.stringify(this.dataInfo.learningPosition) != '[]' &&
        (((this.dataInfo.learningPosition.page - 1) * 10 + this.dataInfo.learningPosition.outIndex) >= 50)
      ) {
        let cIndex = (this.dataInfo.learningPosition.page - 1) * 10 + this.dataInfo.learningPosition.outIndex;
        limit10 = (Math.floor(cIndex / 50) + 1) * 50;
      }
      let postUrl = `${global.apiurl}combos/${this.combosId}/dirs?page=${this.page}&limit=${limit10}&name=${this.searchWord}&comboPermission=${this.dataInfo.hasPermission ? 1 : 0}`;
      utilJs.getMethod(postUrl, (res) => {
        this.isLoading = false;
        if (this.page == 1) {
          this.packageDetail = res;
          // this.getPackageDetail();
        } else {
          this.packageDetail = this.packageDetail.concat(res);
        }
        if (this.page == 1 && limit10 > 50) {
          this.page = Math.floor(limit10 / 50) + 1;
        } else {
          this.page = res && (res.length >= limit10) ? (this.page + 1) : this.page;//res.current_page < res.last_page ? this.page + 1 : this.page;
        }
        this.is_page = res && (res.length >= limit10) ? true : false;//res.current_page < res.last_page;
      }, failRes => {
        this.isLoading = false;
      });
    },
    moreDeviceScroll() {
      let bWidth = document.getElementById('app').clientWidth;
      let moreDeviceHeight = (bWidth / 16) * 2;
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      let deviceOffsetTop =
      document.querySelector("#moreDevice").offsetTop != null
          ? document.querySelector("#moreDevice").offsetTop
          : 0;
      if (deviceOffsetTop > 0) {
        if (scrollTop >= (deviceOffsetTop + moreDeviceHeight)) {
          this.moreDeviceType = 2;
        } else {
          this.moreDeviceType = 1;
        }
      }
    },
    handleScroll() {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      var offsetTop = document.querySelector('#tabhBarWrap').offsetTop != null ? document.querySelector('#tabhBarWrap').offsetTop : 54;
      if (scrollTop > offsetTop) {
        this.tabhBarFixed = true;
      } else {
        this.tabhBarFixed = false;
      }
      //滚到底部加载更多，延迟200ms防止刚切换tab的时候就触发
      let that = this;
      setTimeout(() => {
        let sTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        let clientHeight = document.body.clientHeight && document.documentElement.clientHeight ? Math.min(document.body.clientHeight, document.documentElement.clientHeight) : Math.max(document.body.clientHeight, document.documentElement.clientHeight);
        let scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
        if (sTop + clientHeight >= (scrollHeight - 20) && that.typeBar == 2 && that.is_page) {
          that.getMoreCourse();
        }
        if (that.dataInfo.learningPosition && JSON.stringify(that.dataInfo.learningPosition) != '[]' && document.querySelector('#c' + Number((that.dataInfo.learningPosition.page - 1) * 10 + that.dataInfo.learningPosition.outIndex))) {
          let currentOffsetTop = document.querySelector('#c' + Number((that.dataInfo.learningPosition.page - 1) * 10 + that.dataInfo.learningPosition.outIndex)).offsetTop;
          let contentWrapOffsetTop = document.querySelector('#contentWrap').offsetTop;
          if (!that.isSearch && that.typeBar == 2 && ((currentOffsetTop + contentWrapOffsetTop - sTop > clientHeight) || (currentOffsetTop + contentWrapOffsetTop - sTop < 100))) {
            that.showGoCurrent = true;
          } else {
            that.showGoCurrent = false;
          }
        }
      }, 200);
      // if (document.querySelector("#moreDevice")) {
      //   this.moreDeviceScroll();
      // }
    },
    clickGoDetail: function (tItem) {
      if ((((!this.dataInfo.hasPermission || this.dataInfo.payType == 1) && this.dataInfo.collectPage == 1) || ((this.dataInfo.hasPermission || this.dataInfo.payType == 3) && this.dataInfo.collectPage != 3)) && this.dataInfo.isRelForm == true && this.dataInfo.hasFormLog == false) {
        // this.goForm('', tItem)
        this.goForm('', null, 1)
        return;
      }
      let type = tItem.type;
      // 跳转到对应的详情页面 知识套餐目录的type 1课程，4专栏，5资料库，6测评，7社群，8直播，9题库，10交互测评，11语音测评，12电子书，13试卷,14圈子,15直播间，16打卡
      // 将知识套餐目录的type 转为 goDetails.js中typeToUrl的key值
      let prodId = type == 1 ? tItem.courseId : type == 4 ? tItem.columnId : type == 5 ? tItem.datumId : type == 6
      ? tItem.topicId : type == 7 ? tItem.socialRoomId : type == 12 ? tItem.ebId : type == 16 ? tItem.signColId : tItem.id ;

      let typeArr = [5, 5, 5, 5, 9, 8, 11, 10, 51, 129, 75, 77, 142, 125, 181, 180, 41];
      type = typeArr[Number(type)];
      let query = {}
      if (type == this.cfrom.itemBank) {
        query.comboId = this.combosId;
      }
      if (type == global.ckFrom.testpPaper) {
        query.origin = global.ckFrom.package
        query.prodId = this.combosId
      }
      // 履约小程序套壳并且是直播跳转到直播小程序
      if (utilJs.getFromApplicationNum() == 5 && (type == 51 || type == 180)) {
        //公开课/直播间链接
        const ENV = process.env.VUE_APP_ENV;
        const ENV_MAP = {
          'dev':1,
          'sit':2,
          'production':3
        }
        this.wxappQuery = `env=${ENV_MAP[ENV]}&liveId=${tItem.id}&socialRoomId=${tItem.jGRoomId}&from=lvApp&token=${localStorage.getItem("token")}}`;
        this.wxappPath = 'rooms/pages/vertical/index';
        return
      }
      goDetails(this, type, prodId, query, (tItem.courseType || 0));
    },
    colseModal() {
      this.showGpModal = false;
    },
    groupPurchasePay(selectNum) {
      this.clickBuy(selectNum);
    },
    clickBuy(selectNum = 0) {
      // 判断体验版是否到期，到期之后不可购买商品
      if (utilJs.alertShopExpire(this, utilJs.getTimeByDate(this.companyAuth.expireTime))) return true;
      let pId = this.ckFrom == this.cfrom.flashSalesCombo && this.dataInfo.sales ? this.dataInfo.sales.pId : null;
      if (this.bindPhoneSetting && this.bindPhoneSetting.buyBind && utilJs.goBindMobile()) {
        let pathQuery = {};
        if (this.goodsRoomId) {
          pathQuery.goodsRoomId = this.goodsRoomId;
        }
        utilJs.goBindMobile();
      } else {
        let ckFromTemp = this.isShowPresent == true ? this.cfrom.presentPackage : (this.ckFrom == this.cfrom.flashSalesCombo ? this.cfrom.flashSalesCombo : this.cfrom.package);
        // 有关联表单，则跳到报名表单处
        if ((this.dataInfo.collectPage == 1 || (this.dataInfo.collectPage == 2 && selectNum > 0)) && this.dataInfo.collectPage != 3 && this.dataInfo.isRelForm == true && this.dataInfo.hasFormLog == false && localStorage.getItem("showForm") == 1) {
          this.goForm('', null, 0, selectNum);
        } else {
          let pathQuery = {
            cId: -1,
            extId: this.combosId,
            ckFrom: ckFromTemp,
            isFromInvite: 0
          };
          if ((this.ckFrom == this.cfrom.flashSalesCombo && this.optimal && this.optimal.optimalPriceType == 101) || this.isShowPresent == true) {
            pathQuery.pId = pId;
          } else if (this.optimal && this.optimal.optimalPriceType != 101) {
            pathQuery.ckFrom = this.isShowPresent == true ? this.cfrom.presentPackage : 61;
          }
          if (selectNum > 0) { //企业团购
            pathQuery.isGroupPurchase = true;
            pathQuery.groupSelectNum = selectNum;
            pathQuery.groupPurchaseId = this.dataInfo.enterpriseGroup.id;
          }
          if (this.goodsRoomId) {
            pathQuery.goodsRoomId = this.goodsRoomId;
          }
          this.$routerGo(this, "push", {
            path: '/homePage/course/coursePay',
            query: pathQuery
          });
        }
      }
    },
    //跳转到表单
    goForm: function (bargainId, goItem = null, goBack = 0, selectNum = 0) {
      let pId = this.ckFrom == this.cfrom.flashSalesCombo && this.dataInfo.sales ? this.dataInfo.sales.pId : null;
      let ckFromTemp = this.isShowPresent == true ? this.cfrom.presentPackage : (this.ckFrom == this.cfrom.flashSalesCombo ? this.cfrom.flashSalesCombo : this.cfrom.package);
      let isGoBack = goBack == 1 || this.dataInfo.hasPermission == true || this.dataInfo.payType == 3 || (this.isMarketing && !this.dataInfo.sales) || this.dataInfo.isSaleOnly == 0 ? 1 : 0;
      let pathQuery = {
        cId: -1,
        extId: this.combosId,
        ckFrom: ckFromTemp,
        isFromInvite: 0,
        relType: 8,
        type: 1,
        pId: pId,
        isGoBack: isGoBack,
        bargainId: bargainId
      };
      if (this.goodsRoomId) {
        pathQuery.goodsRoomId = this.goodsRoomId;
      }
      if (selectNum > 0) { //企业团购
        pathQuery.isGroupPurchase = true;
        pathQuery.groupSelectNum = selectNum;
        pathQuery.groupPurchaseId = this.dataInfo.enterpriseGroup.id;
      }
      if (goItem) {
        let type = goItem.type;
        // 跳转到对应的详情页面 知识套餐目录的type 1课程，4专栏，5资料库，6测评，7社群，8直播，9题库，10交互测评，11语音测评，12电子书，13试卷,14圈子,15直播间
        // 将知识套餐目录的type 转为 goDetails.js中typeToUrl的key值
        let prodId = type == 1 ? goItem.courseId : type == 4 ? goItem.columnId : type == 5 ? goItem.datumId : type == 6
        ? goItem.topicId : type == 7 ? goItem.socialRoomId : type == 12 ? goItem.ebId : goItem.id;

        let typeArr = [5, 5, 5, 5, 9, 8, 11, 10, 51, 129, 75, 77, 142, 125, 181, 180];
        type = typeArr[Number(type)];
        if (type == this.cfrom.itemBank) {
          pathQuery.qComboId = this.combosId;
        }
        if (type == global.ckFrom.testpPaper) {
          pathQuery.qOrigin = global.ckFrom.package
          pathQuery.qProdId = this.combosId
        }
        pathQuery.prodId = prodId;
        pathQuery.prodType = type;
        pathQuery.courseType = goItem.courseType || 0;
        pathQuery.isGoItem = 1;
      }
      this.$routerGo(this, "push", { path: '/homePage/form', query: pathQuery });
    },
    initData: function () {
      this.cloroRGB = THEME_RGB_MAP[this.theme];
      this.typeBar = 0;
      this.tabhBarFixed = false;
      this.goodsRoomId = this.$route.query.goodsRoomId || "";
      this.combosId = this.$route.query.combosId || "";
      this.accessToken = this.$route.query.accessToken || "";
      this.dataInfo = "";
      this.packageDetail = [];
      this.relationData = "";
      this.isShowPresent = false;
      this.isCollage = false;
      this.showShareMoneyTip = true;
      this.showPoints = false;
      this.rewardPoints = 0;
      this.hasGetRelation = false;
      this.tabList = [{
        title: '详情',
        index: 0,
      }];
      this.couponPage = 1;
      this.couponIsPage = false;
      this.couponLoading = false;
      this.showCoupon = false;
      this.couponList = [];
      this.commentStatus = 0;
      this.relatedList = [];
      this.showIntegrate = false; //获取积分提示
      this.integrateCount = 0;
      this.showFormText = false;
      this.is_page = false;
      this.page = 1;
      this.isLoading = false;
      this.descriptList = [];
      this.showMarketingBuyBtn = false;
      this.hasExpired = false;
      this.showSearch = false;
      this.searchWord = "";
      this.isApp = utilJs.isAndroidApp() || utilJs.isIOSApp();
      this.popRelateCourse = false;
      this.timingPutOn = false;
      this.moveDirection = 0;
      this.isOffSale = false;
      this.showGoCurrent = false;
      this.isSearch = false;
      this.popGift = false;
      this.relateCollocation = [];
      this.chainInfo = '';
      this.isChainProd = false;
      this.optimal = null;
      this.showGpModal = false;
      this.moreDeviceType = 1;
      this.$store.commit("updateHasNoticeText", false);
      this.judgeCompliance()
    },
    //跳转至大转盘
    goTOturn() {
      let $this = this
      $this.$routerGo($this, "push", {
        path: "/homePage/marketing/turntable",
        query: {
          taId: $this.dataInfo.joinActivityInfo.activityData.id
        }
      });
    },
    getPackageDetail: function () {
      let $this = this;
      let getUrl = global.apiurl + "combos/" + this.combosId
      if (this.accessToken) {
        getUrl = getUrl + '?accessToken=' + this.accessToken;
      }
      getUrl = getUrl.includes('?') ? (getUrl + '&isSkeleton=1') : (getUrl + '?isSkeleton=1');
      utilJs.getMethod(getUrl,
        function (res) {
          if (JSON.stringify(res) === '[]') {
            $this.$routerGo($this, "replace", { path: "/error/emptyPage", query: { from: '', info: '该知识套餐已删除，请联系管理员！' } });
          } else {
            setDocumentTitle(res.name.length > 13 ? (res.name.substring(0, 13) + '...') : res.name);// eslint-disable-line
            //判断课程指定日期过期是否已经过期
            if (res.isValid == 2 && (res.permissionType == 0 || res.permissionType == 2 || res.permissionType == 3 || res.permissionType == 19)) {
              $this.hasExpired = utilJs.getTimeByDate(res.validAt) - (new Date()).getTime() < 0;
              if ($this.hasExpired) {
                $this.$store.commit("updateHasNoticeText", true);
              }
            }
            //如果课程是会员或服务商免费的，课程，专栏，知识套餐等知识产品下架了，也要显示下架
            if (((!res.hasPermission) || (res.hasPermission && (res.permissionType == 1 || res.permissionType == 2 || res.permissionType == 3 || res.permissionType == 18 || res.permissionType == 19))) && res.status == 2) {
              $this.isOffSale = true;
              $this.$store.commit("updateHasNoticeText", true);
            }
            //定时上架
            if (res.status == 3 && ((!res.hasPermission) || (res.hasPermission && (res.payType != 2 || ($this.vipType > 1 && ((res.vipDiscount == 0 && (res.permissionType == 2 || res.permissionType == 3 || res.permissionType == 19)) || (res.svipDiscount == 0 && (res.permissionType == 3 || res.permissionType == 19)))))))) {
              $this.timingPutOn = true;
              $this.$store.commit("updateHasNoticeText", true);
            }
            res.deductiblePoints = res.deductibleAmount; // 兼容字段
            $this.dataInfo = res;
            // optimalPriceType：1 产品本身价格 2 vip价格 3 svip价格 4 服务商 101 限时购 102 拼团 112 砍价  10 链动会员 20 链动代理商 99 链动复购
            $this.optimal = res.optimal || null;
            $this.dataInfo.validTime = $this.dataInfo.validDay;
            $this.getMoreCourse();
            if ($this.dataInfo.isCopy > -1) { //-1：使用全局变量 1：允许复制 0：禁止复制
              $this.cfg.isCopy = $this.dataInfo.isCopy;
            }
            if ($this.dataInfo.isCopyPicture > -1) { //-1：使用全局变量 1：允许复制 0：禁止复制
              $this.cfg.isCopyPicture = $this.dataInfo.isCopyPicture;
            }
            $this.isCollect = $this.dataInfo.isCollect ? $this.dataInfo.isCollect : false;
            $this.courseCount = res.total;
            var rewardPoints = sessionStorage.getItem($this.combosId + 'rewardPoints');
            if (rewardPoints > 0) {
              $this.showPoints = true;
              $this.rewardPoints = rewardPoints;
            };
            if ($this.dataInfo.joinActivityInfo && $this.dataInfo.joinActivityInfo.isShowDialog == 1) {
              $this.$cjConfirm({
                title: '', //
                titleCenter: true, //标题是否居中
                message: '恭喜！您获得了大转盘抽奖机会！',
                messageCenter: true, //内容是否居中
                showMasker: true, //是否显示透明背景
                clickCloseModal: false, //是否点击透明背景关闭弹窗
                showCancelButton: true, //是否显示取消按钮
                cancelButtonText: '稍后再说', //取消按钮文本
                confirmButtonText: '立刻前往', //确认按钮文本
                onConfirm() {
                  $this.$routerGo($this, "push", {
                    path: "/homePage/marketing/turntable",
                    query: {
                      taId: $this.dataInfo.joinActivityInfo.activityData.id
                    }
                  });
                }
              })
            }

            if (res.collage != null && $this.companyAuth.enableCollage == 1) {
              let nt = (new Date()).getTime();
              let st = utilJs.getTimeByDate(res.collage.startTime);
              let et = utilJs.getTimeByDate(res.collage.endTime);
              if (nt >= st && nt < et && res.collage.status < 3) {
                $this.isCollage = true;
                res.collage.status = 2;
              } else if (nt < st && res.collage.status == 1) {
                $this.isCollage = true;
                res.collage.status = 1;
              } else if (nt >= et && res.collage.status == 2) {
                res.collage.status = 3;
                res.collage = null;
                $this.isCollage = false;
              } else {
                $this.dataInfo.collage = null;
                $this.isCollage = false;
              }
            } else if (res.sales != null && res.sales.status && (res.sales.limit == 0 || res.sales.balance > 0) && $this.companyAuth.enableFlashSalesModule == 1) {
              let nt = (new Date()).getTime();
              let st = utilJs.getTimeByDate(res.sales.sales.startTime);
              let et = utilJs.getTimeByDate(res.sales.sales.endTime);
              if (nt >= st && nt < et && $this.dataInfo.sales.sales.status > -1) {
                $this.ckFrom = global.ckFrom.flashSalesCombo;
                $this.dataInfo.sales.sales.status = 2;
              } else if (nt < st && $this.dataInfo.sales.sales.status == 1) {
                $this.ckFrom = global.ckFrom.package;
                $this.dataInfo.sales.sales.status = 1;
                // $this.dataInfo.sales = null;
                $this.cId = -1;
              } else if (nt >= et && $this.dataInfo.sales.sales.status == 2) {
                $this.dataInfo.sales.sales.status = -1;
                $this.dataInfo.sales = null;
                $this.cId = -1;
                $this.ckFrom = global.ckFrom.package;
              } else {
                $this.dataInfo.sales = null;
                $this.cId = -1;
                $this.ckFrom = global.ckFrom.package;
              }
            } else {
              $this.dataInfo.sales = null;
              $this.dataInfo.collage = null;
              $this.isCollage = false;
              $this.ckFrom = global.ckFrom.package;
            }
            // $this.packageDetail = res.details;
            // if (($this.cfg && $this.cfg.isDirShow == 1) || res.hasPermission == true) {
            $this.tabList.push({
              title: '目录',
              index: 2,
            })
              // $this.tabList = [{
              //   title: '套餐详情',
              //   index: 0,
              // },
              // {
              //   title: $this.packageDetail && $this.packageDetail.length > 0 ? '套餐目录•' + $this.packageDetail.length : '套餐目录',
              //   index: 2,
              // }];
            // }
            $this.relatedList = res.signColumns;
            $this.showFormText = res.collectPage != 3 && res.hasPermission == true && res.isRelForm == true && res.hasFormLog == false && localStorage.getItem("showForm") == 1 ? true : false;
            $this.dataInfo.showMarketingCard = $this.dataInfo.isFriendHelper || $this.dataInfo.collage || $this.dataInfo.sales || $this.dataInfo.bargain;
            $this.getRelatedList();
            // 是否显示评论tab
            if (($this.dataInfo.enableComment == 1) || ($this.dataInfo.enableComment == 2 && $this.cfg && $this.cfg.enableComment == 1 && $this.cfg.enableComboComment == 1)) {
              $this.tabList.push({
                title: '评论',
                index: 5,
                smallNum: 0
              })
            }
            $this.typeBar = res.tabsType == 4
                              ? (($this.cfg.enableCourseShowType == 2 || ($this.cfg.enableCourseShowType == 1 && (res.hasPermission == false || $this.isUserGroup || $this.isOffSale))) ? 0 : 2)
                              : ((res.tabsType == 1 || (res.tabsType == 3 && (res.hasPermission == false || $this.isUserGroup || $this.isOffSale))) ? 0 : 2);
            // 友情灌溉
            if (res.isFriendHelper) { //友情灌溉
              let stime = $this.dataInfo ? utilJs.getTimeByDate($this.dataInfo.faStartAt) : 0;
              let etime = $this.dataInfo ? utilJs.getTimeByDate($this.dataInfo.faEndAt) : 0;
              let nowTime = (new Date()).getTime();
              //faStatus 1未开始,2进行中,3已结束,4已停止
              if (stime > nowTime) {
                $this.faStatus = 1;
              } else if (etime > nowTime) {
                $this.faStatus = 2;
              }
            }
            if (!$this.dataInfo.hasPermission) {
              $this.getCouponList();
            }
            let giftPops = localStorage.getItem('giftPopArr') ? JSON.parse(localStorage.getItem('giftPopArr')) : [];
            if ($this.dataInfo.hasPermission && $this.dataInfo.giftRelates && $this.dataInfo.giftRelates.length > 0 && !giftPops.includes($this.combosId)) {
              $this.dataInfo.giftRelates.forEach((item) => {
                if (item.prodType == global.ckFrom.shopping && item.status != 1) {
                  // this.goodsToGet = true;
                  $this.$cjConfirm({
                  title: '', //
                  titleCenter: true, //标题是否居中
                  message: '赠品礼包中包含商城商品，是否前往兑换',
                  messageCenter: true, //内容是否居中
                  showMasker: true, //是否显示透明背景
                  clickCloseModal: false, //是否点击透明背景关闭弹窗
                  showCancelButton: true, //是否显示取消按钮
                  cancelButtonText: '取消', //取消按钮文本
                  confirmButtonText: '去兑换', //确认按钮文本
                  onConfirm() {
                    let giftPopArrTmp = localStorage.getItem('giftPopArr') ? JSON.parse(localStorage.getItem('giftPopArr')) : [];
                    giftPopArrTmp.push($this.combosId)
                    localStorage.setItem('giftPopArr', JSON.stringify(giftPopArrTmp));
                    $this.popGiftModal();
                  },
                  onCancel() {
                    let giftPopArrTmp = localStorage.getItem('giftPopArr') ? JSON.parse(localStorage.getItem('giftPopArr')) : [];
                    giftPopArrTmp.push($this.combosId)
                    localStorage.setItem('giftPopArr', JSON.stringify(giftPopArrTmp));
                  }
                })
                }
              })
            }
            if ($this.dataInfo.enterpriseGroup && $this.dataInfo.payType == 2) {
              let gpInfo = {
                cover: $this.dataInfo.enterpriseGroup.image || $this.dataInfo.courseAvatar || $this.dataInfo.cover,
                title: $this.dataInfo.enterpriseGroup.name ? $this.dataInfo.enterpriseGroup.name : $this.dataInfo.name,
                coursePrice: $this.dataInfo.price,
                ladders: $this.dataInfo.enterpriseGroup.ladder,
                isValid: $this.dataInfo.isValid,
                validTime: $this.dataInfo.validTime,
                validAt: $this.dataInfo.validAt,
                defultBuyNum: $this.dataInfo.enterpriseGroup.ladder[0].minBuyNumber,
                hasGift: $this.dataInfo.giftRelates && $this.dataInfo.giftRelates.length > 0 ? true : false
              }
              $this.$nextTick(() => {
                $this.$refs.gpModal.initData(gpInfo);
              })
            }
            $this.watchRecord();
            $this.getCommentStatus();
            $this.getRelation();
            $this.wechatShare();
            $this.$nextTick(function () {
              if (!$this.dataInfo.hasPermission) {
                $this.getProdRelateCollocation();
              }
              $this.$refs.descriptions.getDescptionDetail();
              $this.scrollToTop();
              window.addEventListener('scroll', $this.handleScroll);
            });
            const guideData = $this.dataInfo.guideData || null;
            const { hasPermission } = $this.dataInfo;
            const showPosition = guideData && (guideData.showPosition == 3 || (guideData.showPosition == 1 && (!hasPermission || $this.dataInfo.payType == 1)) || (guideData.showPosition == 2 && hasPermission))
            if ($this.$refs.guidance && guideData && guideData.isOpenGuide == 1 && $this.dataInfo.guideData.guideType.includes(3) && showPosition) {
              utilJs.getLeadSocialLog($this.cfrom.package, $this.combosId).then(dataRes => {
                if (!dataRes || dataRes == '') {
                  $this.$refs.guidance.isShowPop();
                  utilJs.saveLeadSocialLog($this.cfrom.package, $this.combosId)
                }
              })
            }
          }
          if (res.sales && res.sales.sales) {
            $this.isSalesBegin = (res.sales.sales.startTime).replace(/\s+|[-]|[:]/g, "") <= (utilJs.getNowTime()).replace(/\s+|[-]|[:]/g, "") ? true : false;
          }
        }
      );
    },
    //回到顶部
    scrollToTop() {
      window.scrollTo(0, 0);
    },
    //分享
    wechatShare: function () {
      let title = this.dataInfo.shareSetting && this.dataInfo.shareSetting.shareTitle ? this.dataInfo.shareSetting.shareTitle : this.dataInfo.name;
      let shareImg = this.dataInfo.sales ? this.dataInfo.sales.shareImg : this.dataInfo.shareSetting && this.dataInfo.shareSetting.sharePic ? this.dataInfo.shareSetting.sharePic : this.dataInfo.cover;
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?combosId=${this.combosId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.dataInfo.shareSetting && this.dataInfo.shareSetting.shareDesc ? this.dataInfo.shareSetting.shareDesc : (this.dataInfo.desc || window.localStorage.getItem("shareDesc") || "点击查看详情");
      if (this.isCollage && this.dataInfo.collage != null && (this.dataInfo.collage.status == 2 || this.dataInfo.collage.status == 1)) {
        title = `【邀您一起拼团】${title}`;
      }
      if (this.dataInfo.sales) {
        title = `【限时抢购】${title}`;
      }
      if (this.companyAuth.enableFriendHelper == 1 && this.ckFrom == this.cfrom.package && !this.isCollage && this.dataInfo.collage == null && this.dataInfo.isFriendHelper == true) {
        title = `【快来帮我灌溉吧】${title}`;
      }
      if (this.dataInfo.bargain != null && ((this.dataInfo.bargain.status == 1 && this.dataInfo.bargain.isPreheat == 1) || this.dataInfo.bargain.status == 2)) {
        title = `【邀您一起砍价】${title}`;
      }
      let $this = this;
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () {
        $this.shareGetIntegration();
      });
    },
    //手机端分享
    appShare: function () {
      let title = this.dataInfo.shareSetting && this.dataInfo.shareSetting.shareTitle ? this.dataInfo.shareSetting.shareTitle : this.dataInfo.name;
      let shareImg = this.dataInfo.sales ? this.dataInfo.sales.shareImg : this.dataInfo.shareSetting && this.dataInfo.shareSetting.sharePic ? this.dataInfo.shareSetting.sharePic : this.dataInfo.cover;
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?combosId=${this.combosId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.dataInfo.shareSetting && this.dataInfo.shareSetting.shareDesc ? this.dataInfo.shareSetting.shareDesc : (this.dataInfo.desc || window.localStorage.getItem("shareDesc") || "点击查看详情");
      if (this.isCollage && this.dataInfo.collage != null && (this.dataInfo.collage.status == 2 || this.dataInfo.collage.status == 1)) {
        title = `【邀您一起拼团】${title}`;
      }
      if (this.dataInfo.sales) {
        title = `【限时抢购】${title}`;
      }
      if (this.companyAuth.enableFriendHelper == 1 && this.ckFrom == this.cfrom.package && !this.isCollage && this.dataInfo.collage == null && this.dataInfo.isFriendHelper == true) {
        title = `【快来帮我灌溉吧】${title}`;
      }
      if (this.dataInfo.bargain != null && ((this.dataInfo.bargain.status == 1 && this.dataInfo.bargain.isPreheat == 1) || this.dataInfo.bargain.status == 2)) {
        title = `【邀您一起砍价】${title}`;
      }
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    }
  },
  activated() {
    setDocumentTitle("知识套餐详情");// eslint-disable-line
    this.initData();
    getBindPhoneSetting(this.cfrom.package).then(res => {
      this.bindPhoneSetting = res;
    });
    utilJs.getChainInfo(this.cfrom.package, this.combosId).then(res => {
      this.chainInfo = res;
      this.isChainProd = this.chainInfo && this.chainInfo.isChainProd;
    });
    this.buyedInfoSwiper()
    // this.getMoreCourse();
    this.getPackageDetail();
  },
  deactivated() {
    this.$store.commit("updateHasNoticeText", false);
    if (this.$refs.gpModal) {
      this.$refs.gpModal.selectShopNum = 0;
    }
    window.removeEventListener('scroll', this.handleScroll);
    sessionStorage.removeItem(this.combosId + 'rewardPoints');
  },
  destroyed() {
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.btn-wrap > div:first-child {
  color: #ff8831;
  color: var(--mb7color);
  background-color: rgba(255, 99, 45, 0.1);
  background-color: var(--rgba10color);
  border-bottom-left-radius: 0.9rem;
  border-top-left-radius: 0.9rem;
  border: 1px solid #ff8831;
  border: 1px solid var(--mb7color);
}
.btn-wrap > div:nth-child(2) {
  color: white;
  background-color: rgba(255, 99, 45, 0.5);
  background-color: var(--rgba50color);
  border-top: 1px solid #ff8831;
  border-top: 1px solid var(--mb7color);
  border-bottom: 1px solid #ff8831;
  border-bottom: 1px solid var(--mb7color);
}
.btn-wrap > div:last-child {
  color: white;
  background-color: #ff8831;
  background-color: var(--mb7color);
  border-bottom-right-radius: 0.9rem;
  border-top-right-radius: 0.9rem;
  border: none;
  border-top: none;
  border-bottom: none;
}
.theme-market .btn-wrap > div:first-child {
  background-color: var(--rgba10MarketColor);
  border: 1px solid var(--marketColor1);
  color: var(--marketColor1);
}
.theme-market .btn-wrap > div:nth-child(2) {
  background-color: var(--rgba50MarketColor);
  border-top: 1px solid var(--marketColor1);
  border-bottom: 1px solid var(--marketColor1);
  color: var(--marketColor1);
}
.theme-market .btn-wrap > div:last-child {
  background-image: -webkit-linear-gradient(0, var(--marketColor2) 0%, var(--marketColor1) 100%);
  color: #FFFFFF;
}
.minh76 {
  min-height: 1.9rem;
}
.icon-course-mark1 {
  position: absolute;
  bottom: 0.05rem;
  right: 0.2rem;
  width: 0.8rem;
  height: 0.8rem;
}
.qrbg {
  width: 100%;
  height: 6rem;
  margin-top: 0.4rem;
  background: url("../../../assets/i/wap/course/ad.jpg") no-repeat center 0;
  background-size: cover;
}
.qrbg > img {
  float: right;
  margin-top: 0.2rem;
}
.yqImg {
  width: 1rem;
  height: 0.8rem;
}
.tabhBar {
  width: 100%;
  max-width: 16rem;
  position: fixed;
  left: 0;
  right: 0;
  margin: auto;
  /* top: 1.3rem; */
  background-color: #fff;
  z-index: 900;
}
.c-bd1-white {
  border:1px solid #fff;
}
.c-pr8 {
  padding-right: 0.2rem;
}
.c-p-l-14 {
  left: -0.35rem;
}
.c-p-t10 {
  top: 0.25rem;
}
.point-bg{
  position: absolute;
  top: 0;
  left: 50%;
  width: 200px;
  margin-left: -100px;
}
.point-dialog{
  background: url('../../../../public/i/wap/course/bg.png') no-repeat;
  background-size: 100% 100%;
}
.yqAnimation {
  animation: yqAni 3s linear infinite;
  -webkit-animation: yqAni 3s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.input {
  font-size: 0.65rem;
  padding: 0 0 0 0.4rem;
  border: 0;
  background: none;
  outline: none;
}

.input:focus {
  outline: none;
}
.input[type="search"] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
}
.small-bottom-line:after{
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  border-bottom: 1px solid #e5e5e5;
  width: 100%;
  -webkit-transform: scale(1, 0.5);
  transform: scale(1, 0.5);
}
.input::-webkit-search-decoration,
.input::-webkit-search-cancel-button {
  display: none;
}
@keyframes yqAni {
  0% {
    width: 0.8rem;
  }
  8% {
    width: 0;
  }
  16% {
    width: 0.8rem;
  }
  100% {
    width: 0.8rem;
  }
}
.camp-guide {
  background: url("../../../assets/i/wap/course/group_guidance_bg.png") no-repeat;
  background-size: 100% 100%;
}
.prodType-triangle {
    width: 0;
    height: 0;
    border-width: 0.2rem 0.2rem 0 0.2rem;
    border-style: solid;
    border-color: transparent #fff transparent transparent;
    bottom: 0;
    right: 0;
}
.cart-icon{
  background:rgba(255,255,255,0.92);
}
.glass {
  background-image: url("../../../assets/i/wap/datum/glass.png");
}
.filter-blur {
  filter: blur(3px);
}
.moveRight {
  animation: move-right 0.15s linear;
  -webkit-animation: move-right 0.15s linear;
}
@-webkit-keyframes move-right {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes move-right {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.moveLeft {
  animation: move-left 0.15s linear;
  -webkit-animation: move-left 0.15s linear;
}
@-webkit-keyframes move-left {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes move-left {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.bg-ccc {
  background-color: #ccc!important;
}
.fc-3F73F8 {
  color: #3F73F8;
}
.pa-im {
  position: absolute !important;
}
</style>